body: { flexGrow: 1, backgroundColor: 'lightblue', }, inputRow: { flexDirection: 'row', alignItems: 'center', marginLeft: 10, marginRight: 10 }, textInput: { flex: 1 }, btn: { minWidth: 60 }
flex布局的一个常用实践是，部分内容固定宽高，让剩下的内容自适应。
像上面这样，我们给Button有一个最小宽度，且TextInput的flexGrow为1，这样的做法可以实现，TextInput总是占满剩下的宽度，且可伸缩。
看了上面的例子，是否觉得在React Native中使用Flexbox布局也挺简单呢？
希望这是个不错的开始。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: