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

Posted 2023-03-15

【中文标题】React Native Picker 不会保持新选择的选项

【英文标题】：React Native Picker does not stay newly selected option

【发布时间】：2020-04-23 14:17:40

【问题描述】：

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

【参考方案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