反应本地弹性指导：＆＃x27; row＆＃x27;不起作用

Question

我试图将这些项目名称列为一排 - 将它们放置在水平上，但它不起作用。我不知道原因。我真的很感谢您的帮助

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

});

Answer 1

原因。

的 - 方向将应用于查看（容器）

请进行以下样式更改。

container :{
  flex:1,
  flexDirection: 'row',
},
menuName:{
  height: 48,
  width: '100%',
  borderWidth: 1,
  padding: 10,
}

要更多地研究flex href =“ https://reaectnative.dev/docs/flexbox” rel =“ nofollow noreferrer”> link。