如何根據選擇器的當前值使用 react-native-picker 在頁面上顯示內容？

Question

我正在嘗試在我的項目中使用react-native-picker ，最近遇到了這個 Expo Snack： 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'
   },
 });