React-native：触发onPress事件(Picker组件)

出于某种原因,相同的 Picker组件表现为iOS上的选项列表和Android上的按钮.我不知道,谁决定,这样做是个好主意.

我想隐藏< Picker />在android上并改为渲染TouchableOpacity.它解决了造型问题.但是,我不知道,我如何让TouchableOpacity onPress方法触发onPress事件为隐藏< Picker />？

您可以尝试以下代码：

主屏幕

import React,{ Component } from 'react';
import { Picker,View,TouchableOpacity,Text,Platform,StyleSheet } from 'react-native';
import { StackNavigator } from 'react-navigation';

export default class HomeScreen extends Component {

  constructor(props){
    super(props);
    this.state = {
      language: 'Pick a Language'
    };
    this._onPressJavaButton = this._onPressJavaButton.bind(this);
    this._onPressJavaScriptButton = this._onPressJavaScriptButton.bind(this);
  }

  static navigationOptions = {
    title: 'Language',};

  _onPressJavaButton() {
    const { navigate } = this.props.navigation;
    navigate('Java')
  }

  _onPressJavaScriptButton() {
    const { navigate } = this.props.navigation;
    navigate('JavaScript')
  }

  onValueChange(itemValue) {
    this.setState({
      language: itemValue
    });
    if (itemValue === 'java') {
      this._onPressJavaButton();
    } else if (itemValue === 'js') {
      this._onPressJavaScriptButton();
    }
  }

  render() {
    return (
      <View style={styles.container}>
        {
          Platform.OS === 'ios' ?
          <Picker
            selectedValue={this.state.language}
            style={{height: 50,width: 100}}
            onValueChange={(itemValue,itemIndex) => this.onValueChange(itemValue)}>
            <Picker.Item label="Pick a language" value="selected"/>
            <Picker.Item label="Java" value="java"/>
            <Picker.Item label="JavaScript" value="js"/>
          </Picker> :
          <View>
          <TouchableOpacity onPress={this._onPressJavaButton}>
            <View>
              <Text>Java</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity onPress={this._onPressJavaScriptButton}>
            <View>
              <Text>JavaScript</Text>
            </View>
          </TouchableOpacity>
          </View>
        }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,backgroundColor: '#fff',alignItems: 'center',justifyContent: 'center',},});

JavaScreen

import React,{ Component } from 'react';
import { View,Text } from 'react-native';

export default class JavaScreen extends Component {
  render() {
    return (
      <View>
        <Text>This is the Java screen</Text>
      </View>
    );
  }
}

JavaScriptScreen

import React,Text } from 'react-native';

export default class JavaScriptScreen extends Component {
  render() {
    return (
      <View>
        <Text>This is the JavaScript screen</Text>
      </View>
    );
  }
}

组件Platform用于根据使用的设备类型确定显示哪个组件(Picker或Touchable).条件格式为：if(condition)？动作：其他动作,如果条件则读取动作或其他动作.

参考文献：

> Facebook,Inc.“平台特定代码”.反应原生.
https://facebook.github.io/react-native/docs/platform-specific-code.html#docsNav(2018年5月2日访问).

原文链接：https://www.f2er.com/react/300992.html

React-native：触发onPress事件(Picker组件)

猜你在找的React相关文章