Cách dễ nhất để sử dụng thiết kế material design trong ứng dụng iOS gốc phản ứng là gì?

Question

tôi đã tìm thấy những hiện thực một phần trên Github là ứng cử viên hàng đầu mặc dù họ có một con đường để đi:

• react-native-material-kit
• react-native-material-design

Họ đang thiếu một số thành phần vào thời điểm này mà tôi sẽ thích sử dụng. Có một giải pháp thay thế mà tôi đang thiếu?

Answer 1

Đây là một ... http://mrn.js.org/

mà cũng có sẵn ở đây ... https://github.com/binggg/mrn

Trông khá tốt với tôi, mặc dù tôi đã chưa sử dụng nó. Điều gì cụ thể bạn thấy là mất tích từ những người khác?

Answer 2

Tôi tin thư viện này là xinthink sẽ đạt được những gì bạn đang theo dõi.

Tôi đang sử dụng cả trên Android và iOS.

Thành thật mà nói, tất cả các thư viện đó CHỈ cung cấp cho bạn một số kiểu, bạn cũng có thể tự viết.

Ví dụ bạn có thể tạo một thẻ vật liệu thiết kế như vậy:

 <ScrollView style={styles.scrollView}> 
      <View style={styles.cardContainer}> 
      <View style={styles.card}> 
       <View resizeMode="cover" style={styles.cardTitleContainer}> 
       <Text style={styles.cardTitle}>Commented on</Text> 
       </View> 
       <View // TextView padding not handled well on Android https://github.com/facebook/react-native/issues/3233 
       style={{ 
        padding : 15, 
       }} 
       > 
       <Text style={styles.cardContent}> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Mauris sagittis pellentesque lacus eleifend lacinia... 
       </Text> 
       </View> 
       <View style={styles.cardAction}> 
       <Text>My Action</Text> 
       </View> 
      </View> 
      </View> 
     </ScrollView> 

sử dụng phong cách sau:

cardContainer:{ 
    flex: 1, 
    alignItems: 'stretch', 
    backgroundColor: '#F5FCFF', 
    padding: 20, 
    marginTop: self.props.device.platform === 'android' ? 56 : 0, 
    }, 

    card:{ 
    flex: 1, 
    backgroundColor: '#ffffff', 
    borderRadius: 2, 
    borderColor: '#ffffff', 
    borderWidth: 1, 
    shadowColor: 'rgba(0, 0, 0, 0.12)', 
    shadowOpacity: 0.8, 
    shadowRadius: 2, 
    shadowOffset: { 
     height: 1, 
     width: 2, 
    }, 
    }, 
    cardTitleContainer:{ 
    flex: 1, 
    height: 170, 
    }, 
    cardTitle:{ 
    position: 'absolute', 
    top: 120, 
    left: 26, 
    backgroundColor: 'transparent', 
    padding: 16, 
    fontSize: 24, 
    color: '#000000', 
    fontWeight: 'bold', 
    }, 

    cardContent:{ 
    padding:0, 
    color: 'rgba(0, 0, 0, 0.54)', 
    }, 

    cardAction:{ 
    borderStyle: 'solid', 
    borderTopColor: 'rgba(0, 0, 0, 0.1)', 
    borderTopWidth: 1, 
    padding: 15, 
    }, 

tôi nhận này mã ví dụ từ thư viện tôi được chia sẻ trong liên kết của tôi. Bạn cũng sẽ nhận thấy không có thành phần tùy chỉnh nào trong thư viện này, chỉ là kiểu.

Answer 3

Tôi đang làm việc trên react-native-material-ui phải ở gần material-ui.

Chúng tôi cần có tùy chọn thay đổi hoàn toàn và rất dễ dàng phong cách/chủ đề của ứng dụng. Và không có thư viện nào cung cấp khả năng đó. Tất nhiên, bạn có thể thiết lập vài điều thông qua các đạo cụ của thành phần. Nhưng bạn phải thay đổi nó trên mọi nơi trong mã của bạn, nơi bạn sử dụng thành phần đó.

Trong react-native-material-ui

• bạn có thể xác định đối tượng đó sẽ được sáp nhập với phong cách mặc định và sử dụng ở khắp mọi nơi trong ứng dụng của bạn - rất dễ dàng
• vẫn có khả năng để thay đổi phong cách của chỉ một thành phần thông qua đạo cụ
• hoặc bạn có thể sử dụng phong cách của mình ngay cả trong các thành phần của riêng bạn (thông qua ngữ cảnh)

Answer 4

Tôi đang sử dụng phản ứng gốc-vật liệu-ui và kết hợp với cửa hàng Redux. Bằng cách này, tôi có thể chuyển đổi chủ đề khi đang di chuyển!

Thật không may ban đầu chúng tôi phải xác định kiểu cho mỗi điều khiển, vì 'Trình kết nối ThemeProviders uiTheme' của phản ứng-nguyên bản-vật liệu-ui có vẻ là một vé một chiều.

Dù sao, nếu mọi thứ được kết nối, tôi có thể quản lý tất cả các kiểu trong một styles.js lớn, chỉ bao gồm một truy vấn Platform.OS, nhiều giao diện và thay đổi chủ đề hoàn chỉnh thông qua trình đơn thả xuống để lưu vào bộ nhớ liên tục cục bộ.

phản ứng-nguyên bản-vật liệu-ui trông rất tuyệt.

<ActionButton 
       actions={[ 
        { icon: 'email', label: 'Email' }, 
        { icon: 'phone', label: 'Phone' }, 
        { icon: 'sms', label: 'Text' }, 
        { icon: 'favorite', label: 'Favorite' }, 
       ]} 
       //not defined 
       //hidden={this.state.bottomHidden} 
       icon="share" 
       transition="speedDial" 
       onPress={(action) => { 
        if (myPlatform === 'android') { 
         ToastAndroid.show(action, ToastAndroid.SHORT); 
        } 
       } } 
       style={{ 
        positionContainer: { bottom: 76 }, 
        container: myStyle.testBack, //<--DYNAMIC ! 
       }} 
       />