React Native: flex布局问题

Question

我试着做一个简单的视图，有两个子视图-- 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>