Qual è il modo più semplice per utilizzare la progettazione dei materiali in un'app iOS nativa reattiva?

Question

Ho trovato queste implementazioni parziali su GitHub come i principali contendenti anche se hanno un modo per andare:

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

Essi mancano alcuni componenti in questo momento che l'avrei fatto piace usare. C'è una soluzione alternativa che mi manca?

Answer 1

Ecco un altro ... http://mrn.js.org/

che è disponibile anche qui ... https://github.com/binggg/mrn

sembra piuttosto buono per me, anche se non ho ancora usato. Cosa vedi in particolare che manca agli altri?

Answer 2

Credo che questa libreria di xinthink realizzerà ciò che stai cercando.

Lo sto usando sia su Android che su iOS.

A dire il vero, tutte quelle librerie JUST ti danno alcuni stili, che potresti anche scrivere da solo.

Per esempio si potrebbe creare una scheda di progettazione materiale in questo modo:

 <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> 

utilizzando i seguenti stili:

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, 
    }, 

ho ottenuto questo codice di esempio dalla libreria ho condiviso nel mio link. Noterai anche che non ci sono componenti personalizzati in questa libreria, solo stili.

Answer 3

Sto lavorando su react-native-material-ui che dovrebbe essere vicino a material-ui.

Abbiamo bisogno di avere possibilità di cambiare completamente e molto facilmente stile/tema dell'applicazione. E non esiste una libreria che fornisca questa possibilità. Naturalmente, puoi impostare un paio di cose tramite oggetti di scena del componente. Ma devi cambiarlo in ogni posto nel tuo codice dove usi quel componente.

In react-native-material-ui

• è possibile definire oggetto che verrà fusa con stili predefiniti e utilizzare ovunque nella vostra applicazione - molto facile
• c'è ancora possibilità di cambiare lo stile di un solo componente tramite oggetti di scena
• oppure è possibile utilizzare il proprio stile anche nei propri componenti (tramite contesto)

Answer 4

Sto utilizzando react-native-material-ui e lo combino con un negozio Redux. In questo modo posso avere tema commutazione al volo!

Sfortunatamente inizialmente dobbiamo definire gli stili per controllo, dal momento che il "plug-in di ThemeProviders uiTheme" di react-native-material-ui sembra essere un biglietto di sola andata.

In ogni modo, se tutto è cablato, posso gestire tutti i miei stili in un unico grande styles.js, composto di query solo uno Platform.OS, diverse skin e cambiare i temi completi tramite un menu a discesa causando azioni/cambiamenti di stato, pronti per salvare in una memoria persistente locale.

react-native-material-ui sembra molto bello.

<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 ! 
       }} 
       />