javascript - React Native 的选择器元素项无效 [在 iOS 中运行]

Question

我正在尝试按照 react-native site 上的官方教程在我的应用程序中实现 native 选择器。但我遇到以下问题。我猜这是由于我的 import 语句的语法造成的。我是 React Native 甚至 JS 的新手，因此希望获得一些有关相同内容以及如何解决此错误的指南。

import React, {
  Component,
} from 'react';

import {
  Text,
  View,
  StyleSheet,
  UIExplorerBlock,
  UIExplorerPage,
  Platform,
  Switch,
  AppRegistry,
  Picker,
  TouchableWithoutFeedback,
} from 'react-native';

const Item = Picker.Item;

==========================

render: function(){

    return <View style = {styles.container}>
    <Text>
    Choose the number of team or players.
    </Text>
        <UIExplorerBlock title="Basic Picker">
                  <Picker
                    style={styles.picker}
                    selectedValue={this.state.selected1}
                    onValueChange={this.onValueChange.bind(this, 'selected1')}>
                    // <Picker.Item label="hello" value="key0" />
                    // <Picker.Item label="world" value="key1" />
                    <Item label="hello" value="key0" />
                    <Item label="world" value="key1" />
                  </Picker>
        </UIExplorerBlock>
    </View>
  }

Answer 1

下面的示例可以帮助您在react-native中实现示例选择器。

import React, { Component } from 'react';

import {
  AppRegistry,
  Text,
  View,
  Picker,
} from 'react-native';

class StackOverflow extends Component {

    constructor(context,props){
        super(context,props);
        this.state = {
             selectedValue: 'c++',
        };
    }

    onValueChange(key, value) {
      this.setState({
          selectedValue : key,
      });
    }

    render() {
      return (
          <View >
             <Text>
                Choose a language
             </Text>

             <Picker
               selectedValue={this.state.selectedValue}
               onValueChange={this.onValueChange.bind(this)}>
               <Picker.Item label="C" value="c" />
               <Picker.Item label="C++" value="c++" />
               <Picker.Item label="Java" value="java" />
               <Picker.Item label="JavaScript" value="js" />
             </Picker>

             <Text>Selected language is {this.state.selectedValue}</Text>
          </View>
      );
    }
}

AppRegistry.registerComponent('StackOverflow', () => StackOverflow);

如果您需要任何说明，请告诉我。