Question

Picker（React-native的原生组件）与下拉菜单不同，但我也尝试过实现它，所以请帮助我如何做到这一点。

       press(){

                 return (
                  <Picker
              selectedValue={this.state.language}

              onValueChange={(lang) => this.setState({language: lang})}>
              <Picker.Item label="Java" value="java" />
              <Picker.Item label="JavaScript" value="js" />
            </Picker>
                );

            }

            tick(){
                    this.setState({picker: true});
                  }
 var xyz= {this.state.picker} ? ({this.press}): (return(<View/>));

这是我的渲染功能的一部分，它包含一个图像按钮，通过单击该按钮我想打开一个下拉菜单。

<TouchableHighlight
                    underlayColor="gray"
                    onPress={this.tick}
                    style=  {{flex:2,justifyContent:'center',alignItems:'center'}}>
                    <Image 
                    style={{height:20,width:20,}}
                    source={require('./images/add-button.png')}/>
                    </TouchableHighlight>

                    {xyz}

我在构造函数中将picker的默认状态设置为false。

Answer 1

也许react-native-dropdown正是您所寻找的。

用法：

var React = require('react-native');
var {
  Component,
  AppRegistry,
  Text,
  View,
} = React;

const DropDown = require('react-native-dropdown');
const {
  Select,
  Option,
  OptionList,
  updatePosition
} = DropDown;

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      canada: ''
    };
  }

  componentDidMount() {
    updatePosition(this.refs['SELECT1']);
    updatePosition(this.refs['OPTIONLIST']);
  }

  _getOptionList() {
    return this.refs['OPTIONLIST'];
  }


  _canada(province) {

    this.setState({
      ...this.state,
      canada: province
    });
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Select
            width={250}
            ref="SELECT1"
            optionListRef={this._getOptionList.bind(this)}
            defaultValue="Select a Province in Canada ..."
            onSelect={this._canada.bind(this)}>
            <Option>Java</Option>
            <Option>Javascript</Option>
          </Select>

          <Text>Selected provicne of Canada: {this.state.canada}</Text>

          <OptionList ref="OPTIONLIST"/>
      </View>
    );
  }
}

AppRegistry.registerComponent('App', () => App);

问题答案：

refs是一种引用您添加的组件的方法：More about refs

updatePosition接受该引用并使用它来查找下拉列表在屏幕上的显示位置。

如何在按下按钮（TouchableHighlight）时显示下拉菜单

1 个答案: