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

Question

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

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

Answer 1

您可以尝试以下代码：

主屏幕

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',
  },
});

Java屏幕

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>
    );
  }
}

JavaScript屏幕

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

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

组件平台决定了根据所使用的设备类型显示哪个组件（Picker 或 Touchable）。条件格式为： if (条件) ? action ：其他操作，读取 if 条件 then 操作 else 其他操作。

参考：

• Facebook, Inc.“平台特定代码”。反应本机。 https://facebook.github.io/react-native/docs/platform-specific-code.html#docsNav（2018 年 5 月 2 日访问）。