React Native：flex布局的问题

Question

我正在尝试使用2个子视图制作一个简单的视图 - v1，v2水平对齐，每个都占据屏幕宽度的50％。

为实现这一目标，我使用以下代码：

<View style={{flexDirection: 'row'}}>
   <View style={{flex:1}}>
   <View style={{flex:1}}>
</View>

我也尝试过使用其他属性 - flexWrap，justifyContent。

但是，每次视图一个接一个地堆叠，并且不占用50％的屏幕。我究竟做错了什么？

编辑：我正在使用的实际代码：

  <View>
    <Text style={styles.place}>New Delhi</Text>
    <View style={{flexDirection: 'row'}}>
      <DayTimeComponent style={{flex:1}}/>
      <DayTimeComponent style={{flex:1}}/>
    </View>
    </View>

Answer 1

您可以使用react-native-easy-grid

轻松完成此操作

<强>代码：

import { Col, Row, Grid } from "react-native-easy-grid";

export default class StackOverflow extends Component {

  render() {
    return (
      <View style={{flex:1}}>
       <Grid>
        <Col style={{backgroundColor:'yellow',alignItems:'center',justifyContent:'center'}}><Text>v1</Text></Col>
        <Col style={{backgroundColor:'green',alignItems:'center',justifyContent:'center'}}><Text>v2</Text></Col>
       </Grid>
      </View>
    );
  }
}

<强>结果：

您还可以创建自定义布局，例如：如果您需要75％-25％的分割，那么您需要做的就是

<Col size={75}></Col>
<Col size={25}></Col>

Answer 2

在两者容器视图上设置“flex：1”。像这样：

<View style={{flex:1}}>
    <Text style={styles.place}>New Delhi</Text>
    <View style={{flexDirection: 'row', flex:1}}>
        <DayTimeComponent style={{flex:1}}/>
        <DayTimeComponent style={{flex:1}}/>
    </View>
</View>