我正在尝试按照 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> 
  } 

请您参考如下方法:

下面的示例可以帮助您在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); 

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


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!