0
337
ViewsReaccionar nativo: 3 componentes en la misma fila en lugar de apilados verticalmente
Estoy practicando con React Native: en esta lista, cada entrada devuelta para mi base de datos está compuesta por 3 elementos:
Ahora quiero que mi pantalla se vea así:
mi código es:
<ListItem bottomDivider> <ListItem.Content style={{textAlign:'left'}}> <ListItem.Title>{item.title}</ListItem.Title> <ListItem.Subtitle style={{color: '#9D7463'}}> <Image style={{ alignSelf: "center", borderRadius: 50 }} source={{ uri: item.probability, width: 48, height: 48 }} /> </ListItem.Subtitle> <ListItem.Subtitle style={{color: '#000', textTransform: 'uppercase'}}> {item.country_id} </ListItem.Subtitle> <Button buttonStyle={{backgroundColor: primaryColor, padding: 9, textAlign: "right"}} title="Follow" onPress={() => alert(item.id_user)} /> </ListItem.Content> </ListItem>2 answers
Answer question0
En este componente puedes usar flexbox
<ListItem.Content style={{width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
0
Debe cambiar flexDirection a row . Tenga en cuenta que esto es diferente de la web :
Flexbox funciona de la misma manera en React Native que en CSS en la web, con algunas excepciones. Los valores predeterminados son diferentes, con flexDirection predeterminado en columna en lugar de fila
Por lo tanto, cambiar flexDirection a la fila de la vista principal y configurar flex:1 para cada hijo debería resolver el problema.
<ListItem.Content style={{flexDirection: "row"}}> <ListItem.Subtitle style={{color: '#9D7463', flex: 1}}> <Image style={{ alignSelf: "center", borderRadius: 50 }} source={{ uri: item.probability, width: 48, height: 48 }} /> </ListItem.Subtitle> <ListItem.Subtitle style={{color: '#000', textTransform: 'uppercase', flex: 1}}> {item.country_id} </ListItem.Subtitle> <Button buttonStyle={{backgroundColor: primaryColor, padding: 9, textAlign: "right", flex: 1}} title="Follow" onPress={() => alert(item.id_user)} /> </ListItem.Content>