IOS 版本上 Picker 的选项值位置未对齐

Question

我的 React Native 0.61.5 应用使用 react-native 中的 Picker 来提供下拉列表选择。在为 IOS 版本移动到 MacOS 后，我注意到下拉选择值的位置远低于文本框，没有对齐。

可供选择的值应该在Cell的左边。

相关组件代码如下：

import { Dimensions, Picker, Button,TextInput,View, StyleSheet,  AppRegistry } from 'react-native'; 

      render() {
        return (
          <View style={styles.container}>
            <TextInput
              style={styles.input}
              placeholder='Username'
              autoCapitalize="none"
              placeholderTextColor='white'
              onChangeText={val => this.onChangeText('username', val)}
            />
            <View style={styles.flexBox}> 
                <Picker.  //<<<==== Picker code
                    selectedValue={this.state.cell_country_code}
                    style={styles.inputLeft}
                    onValueChange={this.pickerValueChange}>
                    <Picker.Item label="CHINA" value="86" />
                    <Picker.Item label="USA" value="1" />
                </Picker>               
                <TextInput
                    style={styles.inputRight}
                    placeholder='Cell'
                    keyboardType='number-pad'
                    autoCapitalize="none"
                    placeholderTextColor='white'
                    onChangeText={val => this.onChangeText('cell', val)}
                />
            </View>
            <TextInput
              style={styles.input}
              placeholder='Corp Name'
              autoCapitalize="none"
              placeholderTextColor='white'
              onChangeText={val => this.onChangeText('corp_name', val)}
            />
            <View style={{flexDirection:"row"}}>
              <Button
                title='Sign Up'
                onPress={this.signUp}
              />
              <Button 
                title='Enter Code'
                onPress={this.enterCode}
              />
            </View>
          </View>
        )
      }
    }

    const styles = StyleSheet.create({
      input: {
        width: Dimensions.get('window').width,
        height: 55,
        backgroundColor: '#42A5F5',
        margin: 5,
        padding: 8,
        color: 'white',
        borderRadius: 2,
        fontSize: 18,
        fontWeight: '500',
    },
    inputRight: {
        flex:5,
        height: 55,
        backgroundColor: '#42A5F5',
        margin: 5,
        marginRight:0,
        padding: 8,
        color: 'white',
        borderRadius: 2,
        fontSize: 18,
        fontWeight: '500',
    },
    inputLeft: {
        flex:2,
        height: 55,
        backgroundColor: '#42A5F5',
        margin: 5,
        marginLeft:0,
        padding: 8,
        color: 'white',
        borderRadius: 2,
        fontSize: 18,
        fontWeight: '500',
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        padding:8,
        margin:5
    },
    flexBox: {
        flexDirection: 'row', 
        width: Dimensions.get('window').width,
        height: 55,
        justifyContent:"space-evenly", 
        marginBottom:10
    },
    segmentContainer: {
        marginTop:5,
        justifyContent: 'center',
        alignItems: 'center'
    },
    tabContainerStyle: { 
        marginTop:10,
        width: Dimensions.get('window').width,
        height: 55,
        backgroundColor: '#F2F2F2' 
    },
    })

Answer 1

使用以下代码，您可以将 IOS 中 Cell 左侧的选择器选择对齐。将选择器样式设置为 absolute:'position' 和 zIndex:1。此代码也适用于平台 android 和 IOS.

请检查工作展览代码：-

https://snack.expo.io/@vishal7008/picker-size-issue

import * as React from 'react';
import {
  TouchableOpacity,
  Text,
  TextInput,
  Picker,
  Platform,
  Button,
  View,
  Dimensions,
  StyleSheet,
} from 'react-native';

export default class App extends React.Component {
  state = {
    cell_country_code: 'Select code',
    isPickerVisible: false,
  };

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.input}
          placeholder="Username"
          autoCapitalize="none"
          placeholderTextColor="white"
          onChangeText={val => this.onChangeText('username', val)}
        />
        <View style={styles.flexBox}>
                  <View style={{ flex: 2, height: Platform.OS=='ios'?55:50,Platform.OS=='ios'?0:5, marginLeft: 5, marginRight: 5 }}>
        { Platform.OS=='ios'  &&  <TouchableOpacity
              style={{ flex: 1 }}
              onPress={() => {
                this.setState({ isPickerVisible: !this.state.isPickerVisible });
              }}>
             <TextInput
                editable={false}
                pointerEvents="none"
                style={styles.inputLeft}
                placeholder="Username"
                autoCapitalize="none"
                placeholderTextColor="white"
                value={this.state.cell_country_code}
              />

            </TouchableOpacity>
              }
            {this.state.isPickerVisible && Platform.OS=='ios' ? 
              <Picker //<<<==== Picker code
                selectedValue={this.state.cell_country_code}
                style={styles.inputLeft1}
                itemStyle={{
                  backgroundColor: '#e9e9e9',
                  color: 'black',
                  elevation: 10,
                  fontSize: 17,
                }}
                onValueChange={(itemValue, itemIndex) =>
                  this.setState({ cell_country_code: itemValue })
                }>
                <Picker.Item label="INDIA" value="+91" />
                <Picker.Item label="CHINA" value="+86" />
                <Picker.Item label="USA" value="+1" />
              </Picker>
             :Platform.OS=='android' ? <Picker //<<<==== Picker code
                selectedValue={this.state.cell_country_code}
                style={styles.inputLeftAndroid}
                itemStyle={{
                  backgroundColor: '#e9e9e9',
                  color: 'white',
                  elevation: 10,
                  fontSize: 15,
                }}
                onValueChange={(itemValue, itemIndex) =>
                  this.setState({ cell_country_code: itemValue })
                }>
                 <Picker.Item label="Select Code" value="+91" />
                <Picker.Item label="INDIA" value="+91" />
                <Picker.Item label="CHINA" value="+86" />
                <Picker.Item label="USA" value="+1" />
              </Picker>: null}
          </View>
          <TextInput
            style={styles.inputRight}
            placeholder="Cell"
            keyboardType="number-pad"
            autoCapitalize="none"
            placeholderTextColor="white"
            onChangeText={val => this.onChangeText('cell', val)}
          />
        </View>
        <TextInput
          style={styles.input}
          placeholder="Corp Name"
          autoCapitalize="none"
          placeholderTextColor="white"
          onChangeText={val => this.onChangeText('corp_name', val)}
        />
        <View style={{ flexDirection: 'row' }}>
          <Button title="Sign Up" onPress={this.signUp} />
          <Button title="Enter Code" onPress={this.enterCode} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  input: {
    width: Dimensions.get('window').width - 10,
    height: 50,
    backgroundColor: '#42A5F5',
    margin: 5,
    padding: 8,
    color: 'white',
    borderRadius: 2,
    fontSize: 15,
    fontWeight: '500',
  },
  inputRight: {
    flex: 5,
    height: 50,
    backgroundColor: '#42A5F5',
    marginTop: 5,
    marginRight: 5,
    padding: 8,
    color: 'white',
    borderRadius: 2,
    fontSize: 15,
    fontWeight: '500',
  },
  inputLeft: {
    flex: 3,
    height: 58,
    marginTop: 5,
    backgroundColor: '#42A5F5',
    padding: 8,
    color: 'white',
    borderRadius: 2,
    fontSize: 15,
    fontWeight: '500',
  },
  inputLeft1: {
    flex: 0,
    height: 0.1,

  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 8,
    margin: 5,
  },
  flexBox: {
    flexDirection: 'row',
    width: Dimensions.get('window').width,
    height: 50,
    absolute: 'position',
    zIndex: 1,
    justifyContent: 'space-evenly',
    marginBottom: 10,
  },
});

输出：-

IOS 版本上 Picker 的选项值位置未对齐

Position of option value for Picker is out of alignment on IOS version

react-native

react-native-ios