React native 在同一对齐方式上对来自不同视图的本机对齐文本输入作出反应

你好，我有两个视图，有一个

flexDirection:行

在每个视图中，我都有一个文本和一个选择器 每个视图中的文本位于同一对齐方式上。。。。我希望两个选择器也在同一条线上，但它们不是

 <View style={{ flex:1,flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
                            <Text style={{ color: '#4B4A4A', fontSize: 22, fontWeight: 'bold' }}>Age</Text>
                            <View style={{ width:width-width/2,borderWidth: 1, borderColor: '#a8a8a8', flex:1,margin: 10, borderBottomColor: '#A8A8A8', borderBottomWidth: 1, borderRadius: 4 }}>
                                <Picker
                                    selectedValue={this.state.currentAge}
                                    onValueChange={(itemValue, itemIndex) => { itemIndex > 0 ? this.setState({ currentAge: itemValue }) : null }}>
                                    <Picker.Item style={{ fontSize: 25, alignSelf: 'center' }} label='--Choose--' value="" />
                                    {
                                        this.state.ages.map(size => {
                                            return <Picker.Item key={size} label={size.name} value={size.id} />
                                        })
                                    }
                                </Picker>
                            </View>
                        </View>
                        <View style={{ flex:1,flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
                            <Text style={{ color: '#4B4A4A', fontSize: 22, fontWeight: 'bold' }}>Occupation</Text>
                            <View style={{ width:width-width/2,borderWidth: 1, borderColor: '#a8a8a8', flex:1, margin: 10, borderBottomColor: '#A8A8A8', borderBottomWidth: 1, borderRadius: 4 }}>
                                <Picker
                                    selectedValue={this.state.currentOccupation}
                                    onValueChange={(itemValue, itemIndex) => { itemIndex > 0 ? this.setState({ currentOccupation: itemValue }) : null }}>
                                    <Picker.Item style={{ fontSize: 25, alignSelf: 'center' }} label='--Choose--' value="" />
                                    {
                                        this.state.occupations.map(size => {
                                            return <Picker.Item key={size} label={size.name} value={size.id} />
                                        })
                                    }
                                </Picker>
                            </View>
                        </View>

年龄
{itemIndex>0？this.setState（{currentAge:itemValue}）：null}>
{
this.state.ages.map（大小=>{
返回
})
}
职业
{itemIndex>0？this.setState（{currentOccupation:itemValue}）：null}>
{
this.state.occulations.map（大小=>{
返回
})
}

---

因此，请告诉我如何修复该问题，并提前感谢您

您可以在行容器的子容器上设置flex属性，该属性将指示子容器的增长或收缩百分比。差不多

<Text style={{ color: '#4B4A4A', fontSize: 22, fontWeight: 'bold', flex: 0.3 }}>Age</Text>

<View style={{ width:width-width/2,borderWidth: 1, borderColor: '#a8a8a8', flex:1,margin: 10, borderBottomColor: '#A8A8A8', borderBottomWidth: 1, borderRadius: 4, flex:0.7 }}> <Picker
......
......

年龄
您可以在行容器的子对象上设置flex属性，该属性将指示子对象应增长或收缩的百分比。差不多

<Text style={{ color: '#4B4A4A', fontSize: 22, fontWeight: 'bold', flex: 0.3 }}>Age</Text>

<View style={{ width:width-width/2,borderWidth: 1, borderColor: '#a8a8a8', flex:1,margin: 10, borderBottomColor: '#A8A8A8', borderBottomWidth: 1, borderRadius: 4, flex:0.7 }}> <Picker
......
......

年龄
为两个文本字段和输入指定宽度
为两个文本字段和输入指定宽度