Question

我是本土的新手，最近我想开发一个以下布局的应用程序，但我不知道如何构建它。

Row1 (contain only one column)
column1  | column2 (Row 2 with 2 columns)
Row3  (Row 3 with one column)

Answer 1

React Native使用flexbox来处理布局问题

https://facebook.github.io/react-native/docs/flexbox.html

在你的情况下，你可以尝试这样的事情：

<View
  style={{ flexDirection: 'column' }} // it will display the direct children as columns, instead of rows, so they will be one below the other
>
  <View style={{ flex: 1 }}> // it will ocupies the full width
    <Text>Line with single content</Text>
  </View>
  <View style={{ flex: 1, justifyContent: 'space-between' }}> // it will ocupies the cull width and distribute the same width amoung for all direct children
    <Text>This content goes left</Text>
    <Text>This content goes right</Text>
  </View>
  <View style={{ flex: 1 }}> // it will ocupies the full width
    <Text>Last line with single content</Text>
  </View>
</View>

以此代码为例来表达这个想法，我在评论中写到这里，所以可能存在拼写错误。

这是一个很酷的游戏教程，可以了解有关flexbox的更多信息：https://flexboxfroggy.com/

希望有所帮助

如何创建反应原生布局

1 个答案: