Question

你好，我有2个视图，其中一个

flexDirection:row 在每个视图中，我都有一个文本和一个选择器每个视图中的文本都在相同的对齐方式上....我也希望2个选择器也处于相同的对齐方式上，但它们不是

 <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>

所以请告诉我如何解决这个问题，并先谢谢您

Answer 1

您可以在行容器的子代上设置flex属性，该属性将指示子代应增长或缩小的百分比。像

this.props.historySports

Answer 2

同时提供两个文本字段并输入宽度

在相同的对齐方式下从不同的视图反应本地对齐文本输入

2 个答案: