Question

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

我想在android上隐藏<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/SE_Life_Green" app:contentInsetLeft="0dp" app:contentInsetStart="0dp" app:contentInsetStartWithNavigation="0dp" > ....... ....... ....... </android.support.v7.widget.Toolbar>并改为渲染<Picker/>。它解决了造型问题。但是，我不知道，如何使TouchableOpacity TouchableOpacity方法触发隐藏onPress的{{1}}事件？

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';

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

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

对于那些正在寻找更简单的第三方即插即用解决方案的人，这里有一些选择：

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

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

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

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

参考文献：

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

React-native：触发onPress事件（Picker组件）

3 个答案: