React native 反应本机：触发onPress事件（选择器组件）

出于某种原因，同一组件在iOS上表现为选项列表，在Android上表现为按钮。我不知道，是谁决定的，这样说是个好主意

---

我想在android上隐藏

，并改为渲染

TouchableOpacity

。它解决了造型问题。但是，我不知道，如何使

touchablepacity

onPress

方法为隐藏的

触发

onPress

事件？

您可以尝试以下代码：

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

主屏幕

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

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

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

import React，{Component}来自'React'；
从“react native”导入{Picker，View，TouchableOpacity，Text，Platform，StyleSheet}；
从“react navigation”导入{StackNavigator}；
导出默认类主屏幕扩展组件{
建造师（道具）{
超级（道具）；
此.state={
语言：“选择一种语言”
};
this.\u onPressJavaButton=this.\u onPressJavaButton.bind（this）；
this.\u onPressJavaScriptButton=this.\u onPressJavaScriptButton.bind（this）；
}
静态导航选项={
标题：“语言”，
};
_onPressJavaButton（）{
const{navigate}=this.props.navigation；
导航（'Java'）
}
_onPressJavaScriptButton（）{
const{navigate}=this.props.navigation；
导航（'JavaScript'）
}
onValueChange（itemValue）{
这是我的国家({
语言：itemValue
});
如果（itemValue=='java'）{
点击此按钮。_onPressJavaButton（）；
}else if（itemValue=='js'）{
点击此按钮。_onPressJavaScriptButton（）；
}
}
render（）{
返回(
{
Platform.OS==='ios'？
this.onValueChange（itemValue）}>
:
JAVA
JavaScript
}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
});

JavaScreen

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

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

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

import React，{Component}来自'React'；
从“react native”导入{View，Text}；
导出默认类JavaScreen扩展组件{
render（）{
返回(
这是Java屏幕
);
}
}

JavaScriptScreen

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

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

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

import React，{Component}来自'React'；
从“react native”导入{View，Text}；
导出默认类JavaScriptScreen扩展组件{
render（）{
返回(
这是JavaScript屏幕
);
}
}

组件、平台是根据所使用的设备类型确定显示哪个组件（选择器或可触摸）。条件格式为：如果（条件）？操作：其他操作，读取if条件，然后操作else其他操作

参考资料：

• Facebook，Inc.“特定于平台的代码”。反应自然。 （2018年5月2日查阅）

---

React Native的

选取器组件（现在已移动到）不是自定义组件，而是使用特定于平台的本机选取器组件，就像警报API一样

获得你想要达到的目标-

从“react native”导入{TouchableOpacity，Platform}
从'@react native community/Picker'导入{Picker}；

然后在渲染方法中检查并渲染适当的元素

iosPicker=（）=>(
this.setState（{language:itemValue}）
}>
)
androidPicker=（）=>(
this.setState（{language:“java”}）
>
JAVA
this.setState（{language:“js”}）
>
JavaScript
)
render（）{
返回(
{Platform.OS==“ios”？this.iosPicker（）：this.androidPicker（）}
)

对于那些寻求更简单的第三方即插即用解决方案的人，这里有几个选项：






您可以尝试以下代码：

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

从“React”导入React；
从'native base'导入{View，Text}；
从'@react native community/Picker'导入{Picker}；
从“react native vector icons/dist/font”导入图标；
导出常量项=选择器项；
导出默认类PickerCustom扩展React.PureComponent{
建造师（道具）{
超级（道具）；
}
静态项=选择器项；
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；
返回(
{selectedLable | |占位符| | |'Select'}
{图标| |}
{children | | data.map（（项，索引）=>{
返回(
);
})}
)
}
}
我也有同样的问题。我最终使用了一个
，我将
设置为绝对位置，并对其进行缩放，使其不可见，但它占据了整个内容。因此，媒体转到
。但仍在寻找一个更好的、诚实的解决方案。你找到了什么吗？尝试做同样的事情，但无法找出答案，找到了吗有更好的解决方案吗？@SamBellerose是的，自定义implementation有人解决了这个问题吗？有没有现成的方法？