React Native：触发 onPress 事件（Picker 组件）

Question

由于某些原因，相同的Picker组件在iOS上行为类似选项列表，在Android上则表现为按钮。我不知道是谁决定将其设计成这样。

我想在Android上隐藏<Picker/>并渲染TouchableOpacity代替它。这可以解决样式问题。然而，我不知道如何使TouchableOpacity的onPress方法触发隐藏的<Picker/>的onPress事件？

- stkvtflw

---

我也遇到了同样的问题。最终我使用了 <View>，并将 <Picker> 设置为绝对定位并缩放它，使其不可见但占据整个区域。这样点击事件就会传递到 <Picker> 上。虽然仍在寻找更好的无 GUI 解决方案。你有找到什么吗？ - Noitidart

尝试做同样的事情，但是无法弄清楚，是否找到了更好的解决方案？ - Sam Bellerose

@SamBellerose 是的，自定义实现。 - stkvtflw

嘿，有人解决了这个问题吗？有没有现成的方法可以实现这个功能？ - Stephanos

Answer 1

React Native的Picker组件（现已移至@react-native-community/react-native-picker）不是定制组件，而是使用特定于平台的本地选择器组件，就像Alert API一样。

要实现您想要的内容-

import { TouchableOpacity, Platform } from "react-native"
import { Picker } from '@react-native-community/picker';

在你的渲染方法中检查平台并呈现适当的元素。

iosPicker = () => (
  <Picker
  selectedValue={this.state.language}
  style={{height: 50, width: 100}}
  onValueChange={(itemValue, itemIndex) =>
    this.setState({language: itemValue})
  }>
    <Picker.Item label="Java" value="java" />
    <Picker.Item label="JavaScript" value="js" />
  </Picker>
)

androidPicker = () => (
  <View>
    <TouchableOpacity
      onPress={() => this.setState({language: "java"})
    >
      <Text>Java</Text>
    </TouchableOpacity>
    <TouchableOpacity
      onPress={() => this.setState({language: "js"})
    >
      <Text>JavaScript</Text>
    </TouchableOpacity>
  </View>
)



render() {
  return(
  <View>
    { Platform.OS === "ios" ? this.iosPicker() : this.androidPicker() }
  </View>
  )

对于那些寻找更简单的第三方即插即用解决方案的人，以下是几个选项：

• react-native-modal-picker

• react-native-actionsheet

- Karan Wadhwa

Answer 2

你可以尝试以下代码：

import React from 'react';
import { View, Text } from 'native-base';
import { Picker } from '@react-native-community/picker';
import Icon from 'react-native-vector-icons/dist/FontAwesome';
export const Item = Picker.Item;
export default class PickerCustom extends React.PureComponent {
    constructor(props) {
        super(props);
    }
    static Item = Picker.Item;
    render() {
        const { data = [], children, onValueChange, selectedValue, prompt, mode, enabled, style, itemColor } = this.props;
        const { icon, placeHolder, containerStyle = {}, placeHolderStyle = {}, iconStyle = {} } = this.props;
        const selected = data.find(i => i.value === selectedValue);
        const selectedLable = selected && selected.label;
        return (
            <View style={{ position: 'relative', ...containerStyle }}>
                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', position: 'relative', zIndex: 0 }}  >
                    <Text numberOfLines={1} style={{ color: '#FFFFFF', ...placeHolderStyle }}>{selectedLable || placeHolder || 'Select'}</Text>
                    {icon || <Icon name="chevron-down" style={{ color: '#FFFFFF', ...iconStyle }} />}
                </View>
                <Picker
                    style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', zIndex: 1, opacity: 0, ...style }}
                    mode={mode}
                    enabled={enabled}
                    prompt={prompt}
                    selectedValue={selectedValue}
                    onValueChange={onValueChange}
                >
                    {children || data.map((item, index) => {
                        return (
                            <Picker.Item
                                color={itemColor}
                                key={`${index}`}
                                value={item.value}
                                label={item.label}
                            />
                        );
                    })}
                </Picker>
            </View >
        )
    }
}

- Drakula Ngọc

Answer 3

你可以尝试以下代码：

主屏幕

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（condition）？action：other action，它的意思是如果条件成立则执行action，否则执行other action。

参考资料：

• Facebook, Inc. “Platform Specific Code”. React Native. https://facebook.github.io/react-native/docs/platform-specific-code.html#docsNav （访问于2018年5月2日）。

- Shamar Yarde