我添加了以下的Picker项目：
addLanguage() {
console.log('addLanguage');
pickerValue = this.state.pickerValue;
pickers = this.state.pickers;
// this.state.itemValues[0] = 'fr';
itemValues = this.state.itemValues;
pickers.push(<View key={Math.random()} style={{flexDirection: 'row', justifyContent: 'center'}}>
<Picker key={Math.random()} style={{width: 150}}
selectedValue={this.state.itemValues[0]}
onValueChange={(itemValue, itemIndex) => {
this.setState({itemValue});
this.handleChangeOption(itemValue);
}}
// this.handleChangeOption(itemValue)}}
>
{
Object.keys(this.state.isoLangs).map((lang) => {
return <Picker.Item key={lang} label={this.state.isoLangs[lang].name} value={lang}/>
})
}
</Picker>
<Image
source={require('./assets/Arrow.png')}
/>
<Picker key={Math.random()} style={{width: 150}}
onValueChange={(value) => {
this.setState({pickerValue: value});
pickerValue = value;
}}>
{
Object.keys(this.state.isoLangs).map((lang) => {
return <Picker.Item key={lang} label={this.state.isoLangs[lang].name} value={lang}/>
})
}
</Picker>
</View>);
this.setState({
...this.state,
pickers: pickers,
// itemValues:itemValues
// pickerValue: pickerValue
});
}
它可以添加新项目，但是一旦选择了项目，它就无法设置所选项目。可能是什么事？我的完整代码是：
import React from 'react';
import {Image, Picker, StyleSheet, Text, TouchableHighlight, View} from 'react-native';
import {StackNavigator} from 'react-navigation'; // Version can be specified in package.json
import {Constants} from 'expo';
class HomeScreen extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.section1}>
<Text style={[styles.text, {paddingBottom: 20}]}>{'Welcome'}</Text>
</View>
<View style={styles.section2}>
<Text style={[styles.text, {paddingTop: 20}]}>{'Your verification was successful'}</Text>
</View>
<View style={styles.section3}>
<Text style={styles.text}>{'Sign up as:'}</Text>
</View>
<View style={styles.section4}>
<View style={styles.buttonContainer}>
<View style={styles.button}>
<TouchableHighlight onPress={() => this.props.navigation.navigate('Details')}>
<Image source={require('./assets/stck2.png')} style={styles.image}/>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.props.navigation.navigate('Details')}>
<Text style={styles.buttonText}>{'Translator'}</Text>
</TouchableHighlight>
</View>
<View style={styles.button}>
<TouchableHighlight onPress={() => this.props.navigation.navigate('Recruiter')}>
<Image source={require('./assets/stck1.png')} style={styles.image}/>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.props.navigation.navigate('Recruiter')}>
<Text style={styles.buttonText}>{'Recruiter'}</Text>
</TouchableHighlight>
</View>
</View>
</View>
</View>
);
}
}
class DetailsScreen extends React.Component {
constructor(props) {
super(props);
// this.state = { itemValue: this.prop.initialSelectedValue };
this.handleChangeOption = this.handleChangeOption.bind(this);
this.addLanguage = this.addLanguage.bind(this)
this.update = this.update.bind(this)
}
state = {
count: 0, itemValues: [], pickers: [], user: '',
isoLangs: {
"ab": {
"name": "Abkhaz",
"nativeName": "аҧсуа"
},
"aa": {
"name": "Afar",
"nativeName": "Afaraf"
},
"af": {
"name": "Afrikaans",
"nativeName": "Afrikaans"
},
"ak": {
"name": "Akan",
"nativeName": "Akan"
},
"sq": {
"name": "Albanian",
"nativeName": "Shqip"
},
"am": {
"name": "Amharic",
"nativeName": "አማርኛ"
},
"ar": {
"name": "Arabic",
"nativeName": "العربية"
}
}
};
getLanguageName = function (key) {
key = key.slice(0, 2);
lang = this.state.isoLangs[key];
return lang ? lang.name : undefined;
};
getLanguageNativeName = function (key) {
key = key.slice(0, 2);
lang = this.state.isoLangs[key];
return lang ? lang.nativeName : undefined;
};
handleChangeOption(itemValue) {
console.log('itemValue ' + itemValue);
console.log('1 this.state.itemValues ' + this.state.itemValues);
this.state.itemValues[0] = itemValue
console.log('2 this.state.itemValues ' + this.state.itemValues);
}
update() {
console.log('update ' + this.state.itemValues);
return this.state.itemValues[0] || 'ar';
}
addLanguage() {
console.log('addLanguage');
pickerValue = this.state.pickerValue;
pickers = this.state.pickers;
// this.state.itemValues[0] = 'fr';
itemValues = this.state.itemValues;
pickers.push(<View key={Math.random()} style={{flexDirection: 'row', justifyContent: 'center'}}>
<Picker key={Math.random()} style={{width: 150}}
selectedValue={this.state.itemValues[0]}
onValueChange={(itemValue, itemIndex) => {
this.setState({itemValue});
this.handleChangeOption(itemValue);
}}
// this.handleChangeOption(itemValue)}}
>
{
Object.keys(this.state.isoLangs).map((lang) => {
return <Picker.Item key={lang} label={this.state.isoLangs[lang].name} value={lang}/>
})
}
</Picker>
<Image
source={require('./assets/Arrow.png')}
/>
<Picker key={Math.random()} style={{width: 150}}
onValueChange={(value) => {
this.setState({pickerValue: value});
pickerValue = value;
}}>
{
Object.keys(this.state.isoLangs).map((lang) => {
return <Picker.Item key={lang} label={this.state.isoLangs[lang].name} value={lang}/>
})
}
</Picker>
</View>);
this.setState({
...this.state,
pickers: pickers,
// itemValues:itemValues
// pickerValue: pickerValue
});
}
render() {
console.log('render: ');
keys = Array.from(this.state.isoLangs);
return (
<View style={{flex: 1, justifyContent: 'center'}}>
<View style={{flexDirection: 'row', justifyContent: 'center'}}>
<Text style={{
fontSize: 20,
fontFamily: 'normal',
color: 'skyblue',
}}>
Which languages do you translate?
</Text>
</View>
{this.state.pickers.map((picker) => {
return picker
})}
<TouchableHighlight onPress={() => this.addLanguage()}>
<Text style={{
fontSize: 20,
fontFamily: 'normal',
color: 'skyblue',
}}>+ add language</Text>
</TouchableHighlight>
<View style={{flexDirection: 'row', justifyContent: 'center'}}>
<TouchableHighlight onPress={() => this.props.navigation.navigate('Screen3')}>
<Image
source={require('./assets/Next.png')}
/>
</TouchableHighlight>
</View>
</View>
);
}
}
const RootStack = StackNavigator(
{
Home: {
screen: HomeScreen,
},
Details: {
screen: DetailsScreen,
},
},
{
initialRouteName: 'Home',
}
);
export default class App extends React.Component {
render() {
return <RootStack/>;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
backgroundColor: '#fff',
},
section1: {
flex: 0.17,
justifyContent: 'flex-end',
alignItems: 'center'
},
section2: {
flex: 0.30,
justifyContent: 'flex-start',
alignItems: 'center'
},
section3: {
flex: 0.10,
justifyContent: 'center',
alignItems: 'center'
},
section4: {
flex: 0.43
},
text: {
fontSize: 24,
color: '#53a6db',
textAlign: 'center',
paddingTop: 40,
paddingBottom: 40,
paddingLeft: 40,
paddingRight: 40
},
buttonContainer: {
flex: 1,
flexDirection: 'row'
},
button: {
flex: 0.5,
justifyContent: 'center',
alignItems: 'center'
},
buttonText: {
fontSize: 24,
color: '#53a6db',
textAlign: 'center',
paddingTop: 5,
paddingBottom: 5,
paddingLeft: 5,
paddingRight: 5
},
image: {
width: 100,
height: 100
}
});
答案 0 :(得分：-1)
您已将selectedValue硬编码为不会更改的变量：selectedValue={this.state.itemValues[0]}。我相信你希望它是this.state.itemValue。