如何在按下按鈕（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接受參考，並用它來尋找到屏幕上應該會出現下拉菜單。