web-dev-qa-db-fra.com

Quelle est la façon la plus simple d'utiliser la conception de matériaux dans une application iOS native native?

J'ai trouvé ces implémentations partielles sur Github en tant que principaux concurrents bien qu'ils aient du chemin à faire:

Ils manquent actuellement de composants que j'aimerais utiliser. Existe-t-il une solution alternative qui me manque?

material-designreact-nativematerial-ui
19
David Handel

Je travaille sur react-native-material-ui qui devrait être proche de material-ui .

Nous devions avoir la possibilité de changer complètement et très facilement le style/thème de l'application. Et il n'y a pas de bibliothèque qui offre cette possibilité. Bien sûr, vous pouvez définir quelques éléments via les accessoires du composant. Mais vous devez le changer à chaque endroit de votre code où vous utilisez ce composant.

Dans react-native-material-ui

  • vous pouvez définir un objet qui sera fusionné avec les styles par défaut et utilisé partout dans votre application - très facile
  • il est toujours possible de changer le style d'un seul composant via des accessoires
  • ou vous pouvez utiliser votre style même dans vos propres composants (via le contexte)
16
xotahal

Nous avons récemment publié React Native Paper at Callstack: https://callstack.github.io/react-native-paper

Quelques faits saillants:

  • Suit les dernières directives de conception des matériaux
  • Belle API de thème qui vous permet de changer de thème dynamiquement
  • Accessible par défaut
  • Prend en charge le mode RTL
  • Fonctionne sur les deux Android et iOS, y compris Expo

Il existe également une intégration officielle pour React Navigation pour notre composant de navigation inférieure.

Voici quelques captures d'écran:

ButtonTextInputFAB

Je ne sais pas quels composants vous manquent. Vous ne savez donc pas si cela répond à vos besoins.

15
satya164

Je crois que cette bibliothèque par xinthink réalisera ce que vous recherchez.

Je l'utilise à la fois sur Android et iOS.

Pour être honnête, toutes ces bibliothèques vous donnent juste des styles que vous pouvez également écrire vous-même.

Par exemple, vous pouvez créer une carte de conception de matériaux comme suit:

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

en utilisant les styles suivants:

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

J'ai obtenu cet exemple de code de la bibliothèque que j'ai partagée dans mon lien. Vous remarquerez également qu'il n'y a pas de composants personnalisés dans cette bibliothèque non plus, juste des styles.

8
SudoPlz

J'utilise react-native-material-ui et le combine avec un magasin Redux. De cette façon, je peux changer de thème à la volée!

Malheureusement, au départ, nous devons définir des styles par contrôle, car le "connecteur ThemeProviders uiTheme" de react-native-material-ui semble être un aller simple.

Quoi qu'il en soit, si tout est câblé, je peux gérer tous mes styles dans un grand styles.js, composé d'une seule requête Platform.OS, de plusieurs skins et de changer des thèmes complets via une liste déroulante provoquant des actions/changements d'état, prêt à enregistrer dans un stockage persistant local.

react-native-material-ui a l'air très cool.

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