反応ネイティブのボタン（TouchableHighlight）を押したときにドロップダウンメニューを表示する方法

Question

ピッカー（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} 

コンストラクタでピッカーのデフォルト状態を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); 

回答：

レフリーは、あなたが追加したコンポーネントを参照する方法です：More about refs

updatePositionはリファレンスを受け入れ、場所を見つけるためにそれを使用していますドロップダウンが画面に表示されます。