Question

我只想问你，如何在react native中创建一个下拉菜单，我看到很多选择器都在下拉菜单，但与普通下拉菜单不同。

Answer 1

在构造函数中定义

 this.state={pickerTime:'30 min',durationPicker:false}

模式代码

 <Modal
    transparent={true}
    animation={"slide"}
    visible={this.state.durationPicker}>
    <TouchableOpacity onPress={() => this.setState({ durationPicker:  
       !this.state.durationPicker })} style={{ flex: 1, backgroundColor: 
         'rgba(0,0,0,0.5)', justifyContent: 'center', alignItems: 'center' }}>
      <View style={{ width: '80%', height: '35%', backgroundColor: 'white',  
        padding: 10 }}>
        <TouchableOpacity style={{ padding: 10, borderBottomWidth: 0.5 }} 
      onPress={() => this.setState({ pickerTime: '30 min', durationPicker: 
       !this.state.durationPicker })}><Text>30 min</Text></TouchableOpacity>
        <TouchableOpacity style={{ padding: 10, borderBottomWidth: 0.5 }} 
         onPress={() => this.setState({ pickerTime: '45 min', durationPicker: !this.state.durationPicker })}><Text>45 min</Text></TouchableOpacity>
        <TouchableOpacity style={{ padding: 10, borderBottomWidth: 0.5 }} onPress={() => this.setState({ pickerTime: '60 min', durationPicker: !this.state.durationPicker })}><Text>60 min</Text></TouchableOpacity>
        <TouchableOpacity style={{ padding: 10, borderBottomWidth: 0.5 }} onPress={() => this.setState({ pickerTime: '75 min', durationPicker: !this.state.durationPicker })}><Text>75 min</Text></TouchableOpacity>
        <TouchableOpacity style={{ padding: 10 }} onPress={() => this.setState({ pickerTime: '120 min', durationPicker: !this.state.durationPicker })}><Text>120 min</Text></TouchableOpacity>
      </View>
    </TouchableOpacity>
  </Modal>

如何在React Native中添加下拉菜单

1 个答案: