Estoy tratando de enumerar estos nombres de elementos en una fila, colóquelos horizontalmente, pero no funciona. No puedo entender la razón por la cual. Realmente agradecería algo de ayuda
const Text = () => { const Menu = [ {'id':1, 'menuName':'whatever', }, {'id':2, 'menuName':'whatever', }, {'id':3, 'menuName':'whatever...', }, ]; return ( <View style={styles.container}><Text >Test </Text> {Menu.map((menuItems) => ( <View style={styles.menuName} key={menuItems.id} > <Text>{menuItems.menuName}</Text> </View> ))} </View> ) } const styles = StyleSheet.create({ container :{ flex:1 }, menuName:{ flexDirection: 'row', height: 48, width: '100%', borderWidth: 1, padding: 10, } });Razón para no trabajar.
Para organizar los elementos en una vista, debe configurar flexDirection = 'fila' en su caso, los elementos dentro de su Vista (Contenedor) deben organizarse horizontalmente para que la dirección flexible se aplique a la Vista (Contenedor)
Realice los siguientes cambios en el estilo, funcionará.
container :{ flex:1, flexDirection: 'row', }, menuName:{ height: 48, width: '100%', borderWidth: 1, padding: 10, }Para obtener más información sobre flex, siga este enlace.