React Native Picker 不会保持新选择的选项

Question

我有两个选择器来选择将语言翻译成语言。其中一个用于输入，另一个用于输出以更改语言。但我对第二个选择器（输出语言选择器）有疑问。我从第一个选项下拉到其他语言选项，选择器立即返回到第一个标签选项。我希望选择器保持在新滚动到的选项。 First Picker 没有问题。

import React, { Component, useState } from 'react';
import { StyleSheet, View, Text, TextInput, Button, TouchableOpacity, Image, ScrollView } from 'react-native';
import {Picker} from '
@react-native-community
/picker'; 

var dil1 = 'tr';
var dil2 = 'en';


const Translator = () => {
var [selectedValue, setSelectedValue] = useState("dil1");
var [selectedValue1, setSelectedValue1] = useState("dil2");


const [inputText, setText] = useState('');
const [responseText, setResponse] = useState('');


function postTranslateService(text) {
fetch('https://translate.yandex.net/api/v1.5/tr.json/translate?key=='+ dil1 +'-'+ dil2 +'&text=' + text)
.then((res) => res.json())
.then((res) => {
console.log(res.text)
setResponse(res.text)
})
.catch((error) => {
console.log(error)
});
};



return (
<ScrollView
contentInsetAdjustmentBehavior="automatic">
      <View style = {styles.container}>
        <Text > </Text>
        <View style={styles.input}>
        <TextInput
          numberOfLines={5}
          multiline={true}
          placeholder="Metni Gir"
          style={{ height: 55, width: 275, borderColor: 'gray',  }}
          onChangeText={text => setText(text)}
        />
</View>


// FİRST PİCKER

<View style={styles.tpick}>
<Picker
selectedValue={selectedValue}
style={{ height: 50, width: 125 }}
onValueChange={(itemValue, itemIndex) => setSelectedValue(dil1=itemValue)}
>
<Picker.Item label="Turkish" value="tr" />
<Picker.Item label="English" value="en" />
<Picker.Item label="Bulgarian" value="bg" />
<Picker.Item label="German" value="de" />
<Picker.Item label="French" value="fr" />
<Picker.Item label="Spanish" value="es" />
<Picker.Item label="Russian" value="ru" />
</Picker>
</View>


<View style={styles.tbutton}>
<Button
title="Translate"
color="#ff6600"
onPress={() => postTranslateService(inputText)}
/>
</View>
           <View style={styles.output}>
        <Text style = {styles.ceviri}>{' ' +responseText}</Text>
        </View>


// SECOND PİCKER


        <View style={styles.tpick}>
    <Picker
      selectedValue1={selectedValue1}
      style={{ height: 50, width: 125 }}
      onValueChange={(itemValue, itemIndex) => setSelectedValue1(dil2=itemValue)}
    >
      <Picker.Item label="Turkish" value="tr" />
      <Picker.Item label="English" value="en" />
      <Picker.Item label="Bulgarian" value="bg" />
        <Picker.Item label="German" value="de" />
        <Picker.Item label="French" value="fr" />
        <Picker.Item label="Spanish" value="es" />
        <Picker.Item label="Russian" value="ru" />
    </Picker>
  </View>      
  </View>      
      </ScrollView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
input: {
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
borderWidth: .6,
borderRadius: 5 ,
margin: 5,
  },
  output: {
   justifyContent: 'flex-start',
   alignItems: 'flex-start',
   borderWidth: .6,
   borderColor: 'gray',
   borderRadius: 5 ,
   margin: 5,
   height: 55,
   top:5,
      },
ceviri: {
fontSize: 15,
color: 'gray',
textAlign: 'center',
fontWeight: 'bold',
marginTop: 12,
},
tbutton: {
left:5,
width: 331,
borderRadius: 5,
marginTop: 7,
top:-75,
},
tpick: {
flex:1,
left:25,
bottom:140,
paddingTop: 40,
alignItems: "center"
},
});
export default Translator; 

Answer 1

我想根据我在类似问题上的经验提供帮助。

但首先，您需要了解 Picker 是一个基于状态的受控组件。

这是你应该做的事情

第 1 步：通过删除引号将初始状态设置为之前定义的变量。这将引用与您的选择器中的一个选项相对应的“tr”......而不是“dil1”。像这样

var [selectedValue, setSelectedValue] = useState(dil1);
var [selectedValue1, setSelectedValue1] = useState(dil2);

第 2 步：将 onValueChange 回调函数中的表达式删除为值。

setSelectedValue(itemValue) // picker 1
setSelectedValue1(itemValue) // picker 2

第 3 步：更改 Picker 2 中的无效属性

<Picker 
   selectedValue1={selectedValue1} 
   ...
>

到

<Picker 
   selectedValue={selectedValue1} 
   ...
>

第 4 步：更新 ajax URL，将dil1 和dil2 分别替换为selectedValue 和selectedValue1。

'https://translate.yandex.net/api/v1.5/tr.json/translate?key=='+ selectedValue +'-'+ selectedValue1 +'&text=' + text