Css 在react native中使用flexbox有困难

我有这个设计，我正试图作出反应原生，但不能正确安排使用flexbox

期望结果

我的代码

从“React”导入React；
从“react native”导入{视图、文本、样式表}
从“react native platform Touchable”导入Touchable；
类Dashboard扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
你好，仪表板
你好，仪表板
你好，仪表板
你好，仪表板
你好，仪表板
你好，仪表板
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:'列'，
justifyContent:“灵活启动”
},
行：{
弹性：1，
flexDirection:'行'，
身高：120，
玛金托普：15，
marginBottom:15，
},
小部件：{
背景颜色：“#fff”，
标高：2，
宽度：“44%”，
marginLeft:15，
marginRight:15
}
})
导出默认仪表板；

输出

---

我认为我的方法有问题。如果有人指出这一点，那就太好了。谢谢。

删除widgets样式中的

宽度：“44%”

，并将其替换为

flex:1

。此外，它也可以代替小部件之间的边距

row: {
    flex: 1,
    flexDirection: 'row',
    height:120,
    marginTop: 15,
    marginBottom: 15,
  },
  widgets: {
    backgroundColor: '#fff',
    elevation: 2,
    flex: 1,
    marginLeft: 15,
    marginRight: 15
  }

---

在您的Expo应用程序中有一种Expo零食：

删除widgets样式中的

宽度：“44%”

，并将其替换为

flex:1

。此外，它也可以代替小部件之间的边距

row: {
    flex: 1,
    flexDirection: 'row',
    height:120,
    marginTop: 15,
    marginBottom: 15,
  },
  widgets: {
    backgroundColor: '#fff',
    elevation: 2,
    flex: 1,
    marginLeft: 15,
    marginRight: 15
  }

---

在你的Expo应用程序中有一个Expo零食：在小部件中添加

flex:1

会使它们消失。如果我删除了

flex:1

，那么这些小部件会被粘在一起，周围有空格，并用世博快餐更新了答案。在小部件中添加

flex:1

会使它们消失。如果我删除

flex:1

，那么这些小部件就会被粘在一起，周围有空格，并用世博快餐更新了答案。