如何根据选择器的当前值在页面上显示内容？

Question

我正试图在我的项目中使用react-native-picker，最近我遇到了一个博览小吃：https://snack.expo.dev/HkM_BcGBW

我希望根据选择器的当前值在页面上显示内容。例如，选择器下面的一些文本说：“您选择的选项是选择器中当前选定选项的文本”。我该怎么做？

Answer 1

可以作为示例，并使用状态值在组件中显示。

import React, { Component } from 'react';
import { Text, View, StyleSheet, Picker } from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props)
    
    this.state = {
      language: 'java',
    }
  }
  
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Unstyled:</Text>
        <Picker
          style={styles.picker} itemStyle={styles.pickerItem}
          selectedValue={this.state.language}
          onValueChange={(itemValue) => this.setState({language: itemValue})}
        >
          <Picker.Item label="Java" value="java" />
          <Picker.Item label="JavaScript" value="js" />
          <Picker.Item label="Python" value="python" />
          <Picker.Item label="Haxe" value="haxe" />
        </Picker>
        
        <Text>The option you have selected is {this.state.language}</Text>
      </View>
    );
  }
}

但请记住

onValueChange={(itemValue) => this.setState({language: itemValue})}

这将存储价值而不是标签。

Answer 2

您可以如下所示使用条件呈现：

import React, { Component } from 'react';
import { Text, View, StyleSheet, Picker } from 'react-native';

export default class App extends Component {
   constructor(props) {
     super(props)

     this.state = {
       language: 'haxe',
       firstLanguage: 'java',
       secondLanguage: 'js',
     }
   }

   render() {
     return (
       <View style={styles.container}>
         <Text style={styles.title}>{this.state.language}</Text>
         <Picker
           style={styles.picker} itemStyle={styles.pickerItem}
           selectedValue={this.state.language}
           onValueChange={(text) => this.setState({language: text})}
         >
           <Picker.Item label="Java" value="java" />
           <Picker.Item label="JavaScript" value="js" />
           <Picker.Item label="Python" value="python" />
           <Picker.Item label="Haxe" value="haxe" />
         </Picker>
         {this.state.language == "haxe"?
         <Text>Hello Haxa</Text>
         :this.state.language == "js"?
         <Text>Helo JavaScript</Text>
         :this.state.language == "python"?
         <Text>Helo Python</Text>
         :this.state.language == "java"?
         <Text>Helo Java</Text>
         :<Text>Nothing</Text>}
       </View>
     );
   }
 }

 const styles = StyleSheet.create({
   container: {
     flex: 1,
     flexDirection: 'column',
     alignItems: 'center',
     padding: 20,
     backgroundColor: 'white',
   },
   title: {
     fontSize: 18,
     fontWeight: 'bold',
     marginTop: 20,
     marginBottom: 10,
   },
   picker: {
     width: 200,
     backgroundColor: '#FFF0E0',
     borderColor: 'black',
     borderWidth: 1,
   },
   pickerItem: {
     color: 'red'
    },
   onePicker: {
     width: 200,
     height: 44,
     backgroundColor: '#FFF0E0',
     borderColor: 'black',
     borderWidth: 1,
   },
   onePickerItem: {
     height: 44,
     color: 'red'
   },
   twoPickers: {
     width: 200,
     height: 88,
     backgroundColor: '#FFF0E0',
     borderColor: 'black',
     borderWidth: 1,
   },
   twoPickerItems: {
     height: 88,
     color: 'red'
   },
 });