material-design - theme - material design icons

¿Cuál es la forma más fácil de usar el diseño de materiales en una aplicación iOS nativa de reacción?

Question

He encontrado estas implementaciones parciales en Github como los principales contendientes, aunque tienen mucho camino por recorrer:

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

Faltan algunos componentes en este momento que me gustaría utilizar. ¿Hay alguna solución alternativa que me esté perdiendo?

Answer 1

Creo que esta biblioteca de react-native-material-kit logrará lo que buscas.

Lo estoy usando tanto en Android como en iOS.

Sin embargo, para ser honesto, todas esas bibliotecas SÓLO te dan algunos estilos, que también puedes escribir tú mismo.

Por ejemplo, podría crear una tarjeta de diseño de material como la siguiente:

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

utilizando los siguientes estilos:

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

Obtuve este código de ejemplo de la biblioteca que compartí en mi enlace. También notará que tampoco hay componentes personalizados en esta biblioteca, solo estilos.

Answer 2

Estoy trabajando en react-native-material-ui que debería estar cerca de material-ui .

Necesitábamos tener la opción de cambiar el estilo / tema de la aplicación completa y muy fácilmente. Y no hay ninguna biblioteca que ofrezca esa posibilidad. Por supuesto, puede establecer un par de cosas a través de accesorios de componente. Pero tiene que cambiarlo en cada lugar de su código donde use ese componente.

En react-native-material-ui

• puede definir el objeto que se fusionará con los estilos predeterminados y utilizarlo en cualquier parte de su aplicación, muy fácil
• Todavía hay posibilidad de cambiar el estilo de un solo componente a través de accesorios
• o puede usar su estilo incluso en sus propios componentes (a través del contexto)

Answer 3

Estoy usando react-native-material-ui y lo combino con una tienda Redux. ¡De esta manera puedo tener un cambio de tema sobre la marcha!

Desafortunadamente, inicialmente tenemos que definir estilos por control, ya que el ''conector de tema ThemeProviders uiTheme'' de reaccion-native-material-ui parece ser un boleto de ida.

De todos modos, si todo está cableado, puedo administrar todos mis estilos en un gran styles.js, que consiste solo en una consulta de Platform.OS, múltiples máscaras y cambiar temas completos a través de un menú desplegable que causa acciones / cambios de estado, listo para guardar en un Almacenamiento local persistente.

reaccionar-nativo-material-ui se ve muy bien.

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

Answer 4

Recientemente lanzamos React Native Paper en Callstack: https://callstack.github.io/react-native-paper

Algunos puntos destacados incluyen:

• Sigue las últimas pautas de diseño de materiales.
• API de temática agradable que le permite cambiar temas dinámicamente
• Accesible por defecto
• Soporta el modo RTL
• Funciona tanto en Android como en iOS, incluyendo Expo

También hay integración oficial para React Navigation para nuestro componente de navegación inferior.

Aquí hay algunas capturas de pantalla:

No estoy seguro de qué componentes te estás perdiendo. Así que no estoy seguro si esto satisface tus necesidades.