реагировать на нативные выравнивающие текстовые входы из разных представлений на одно и то же выравнивание

Question

привет, у меня есть 2 представления, имеющие

flexDirection:row, и в каждом представлении у меня есть текст и средство выбора, текст в каждом представлении находится на одном и том же выравнивании .... я хочу, чтобы два средства выборабыть в том же положении, но они не

 <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

Введите ширину текстовых полей и вводимых данных

Answer 2

Вы можете установить свойство 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
......
......