react-native:Modal中的Picker没有显示

时间:2017-03-28 09:14:08

标签: react-native react-native-android picker

当我的Picker嵌入Modal时,它不会出现在屏幕上(仅针对android测试)

  renderModal() {
    return (
      <Modal
        transparent={true}
        visible={this.state.showModal}
        onRequestClose={() => this.setState({ modalIsVisible: false })}
        animationType={'fade'}>
        <View
          style={{ backgroundColor:'rgba(0, 0, 0, 0.7)', flex: 1, justifyContent: 'center', padding: 20, height:100 }}>
        <View style={{ borderRadius:10, alignItems: 'center', backgroundColor: '#fff', padding: 20 }}>
          <Text>
            Choisissez la priorité de cet emplacement
          </Text>
          <Picker
            selectedValue={this.state.storagePriority}
            onValueChange={(priority) => this.setState({storagePriority: priority})}>
            <Picker.Item label="Basse" value="LOW" />
            <Picker.Item label="Normale" value="MEDIAN" />
            <Picker.Item label="Haute" value="HIGH" />
            <Picker.Item label="Réserve" value="STOCK" />
          </Picker>
        </View>
        </View>
      </Modal>
    );
  }

有什么建议吗?

2 个答案:

答案 0 :(得分:3)

为拾取器提供合适的样式并运行它。

以下是样式选择器的示例代码。

    <Picker
        style={styles.picker}
        mode="dropdown"
        itemStyle={styles.itemStyle}>
            <Item label="Basse" value="LOW" />
            <Item label="Normale" value="MEDIAN" />
    </Picker>

样式:

itemStyle: {
    fontSize: 15,
    height: 75,
    color: 'black',
    textAlign: 'center',
    fontWeight: 'bold'
  }
picker: {
    width: 100
  },

答案 1 :(得分:0)

为Picker设置style={{ width: 100 }}解决了它