0
我希望你能幫助我。我有一個api的自行車listview。而且我每排都有一個選擇器租用一些自行車。選擇器的selectedValue在每一行中都是相同的。所以當我在一行中更改選擇器時，每一行中的數字都會改變，因爲我使用setState來改變它。我不想更改dataSource，只有一行的狀態。我搜查了，但我找不到正確的答案。更改ListView中的Picker React Native
這裏是我的代碼：
import React, { Component } from 'react';
import {
Text,
View,
StyleSheet,
ListView,
Image,
TouchableHighlight,
TextInput,
Picker,
Item,
Alert,
ScrollView
} from 'react-native';
import MapView from 'react-native-maps';
import DatePicker from 'react-native-datepicker';
import FourthScreen from './FourthScreen';
export default class ThirdScreen extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
bikes: [],
bikeCount: 0,
region: {
latitude: this.props.latitude,
longitude: this.props.longitude,
latitudeDelta: 0.06,
longitudeDelta: 0.06
},
count: '0',
price: 0.00,
date1: '',
date2: '',
amount: '0',
numbers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
totalPrice: 0.00
}
}
componentWillMount() {
this.getBikesFromApiAsync();
}
getBikesFromApiAsync() {
return fetch(`https://api.bimbimbikes.com/locations/${this.props.id}/bikes`, {
method: 'GET',
headers: {
'Authorization': 'Basic ',
}
})
.then((response) => response.json())
.then((json) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(json.data.results),
bikes: json.data.results
});
console.log(this.state.dataSource);
console.log(this.state.bikes);
})
.catch((error) => {
console.error(error);
})
.done();
}
render() {
var bikeCount = this.state.bikes.length;
return (
<ScrollView>
<View style={styles.container}>
<View style={styles.viewMapView}>
<MapView
style={styles.mapView}
region={this.state.region}>
<MapView.Marker
coordinate={this.state.region}
title={this.props.name}
/>
</MapView>
</View>
<Text style={styles.textStyle}>{this.props.name}</Text>
<Text style={styles.textStyle}>{this.props.city_name}, {this.props.country_name}</Text>
<View style={styles.date}>
<DatePicker
style={{width: 300, marginBottom: 10}}
date={this.state.date1}
mode="date"
placeholder="Startdatum"
format="DD-MM-YYYY"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
onDateChange={(date1) => {this.setState({date1: date1});}}/>
<DatePicker
style={{width: 300}}
date={this.state.date2}
mode="date"
placeholder="Einddatum"
format="DD-MM-YYYY"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
onDateChange={(date2) => {this.setState({date2: date2});}}/>
</View>
<Text style={styles.textStyle}>{bikeCount.toString()} Fietsen</Text>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderBikesRow.bind(this)}
/>
<Text style={styles.textStyle}>Prijs: € {this.state.price}</Text>
<View style={styles.buttonView}>
<TouchableHighlight style={styles.button} onPress={() => this.reserveBike()}>
<Text style={styles.buttonText}>Reserveer Nu</Text>
</TouchableHighlight>
</View>
</View>
</ScrollView>
)
}
reserveBike() {
if(this.state.date1 && this.state.date2) {
this.props.navigator.push({
component: FourthScreen,
passProps: {
date1: this.state.date1,
date2: this.state.date2,
name: this.props.name,
city_name: this.props.city_name,
country_name: this.props.country_name,
total: this.state.total
}
});
} else {
Alert.alert(
'Choose Date',
'You have to choose a date'
);
}
}
onValueChange(key: number, value: number) {
console.log(key);
console.log(value);
}
renderBikesRow(rowData, sectionId, rowId, highlightrow) {
console.log(rowData, sectionId, rowId, highlightrow);
var price = rowData.prices['24h']/100;
var amount = this.state.amount;
return (
<View style={styles.row}>
<Text style={styles.textStyleBike}>{rowId}: {rowData.name}</Text>
<Picker
style={styles.picker}
selectedValue={this.state.amount}
onValueChange={(number) => this.setState({amount: number, price: number * price})}
mode="dropdown">
{this.state.numbers.map((number) => {return <Picker.Item value={number} label={number.toString()} key={number}/> })}
</Picker>
<Text style={styles.textStylePrice}>€ {price}</Text>
</View>
)
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 60,
backgroundColor: 'rgb(82, 71, 72)'
},
viewMapView: {
alignItems: 'center'
},
mapView: {
width: 300,
height: 200,
marginTop: 10,
alignItems: 'center'
},
textStyle: {
margin: 10,
color: '#fff',
fontSize: 20,
textAlign: 'center'
},
date: {
alignItems: 'center',
},
row: {
flex: 5,
flexDirection: 'row',
borderBottomWidth: 1
},
textStyleBike: {
color: '#ffa405',
fontSize: 20,
paddingTop: 15,
paddingRight: 10,
paddingLeft: 10,
flex: 3
},
textInput: {
height: 50,
width: 50,
textAlign: 'center',
flex: 1,
fontSize: 20
},
picker: {
flex: 1,
height: 50
},
textStylePrice: {
color: '#ffa405',
fontSize: 20,
paddingTop: 15,
paddingRight: 10,
paddingLeft: 10,
flex: 1
},
button: {
height: 40,
width: 300,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ffa405',
marginBottom: 10
},
buttonText: {
fontSize: 18,
fontWeight: '600'
},
buttonView: {
alignItems: 'center'
}
});
請清楚解釋你的問題是什麼。我不清楚什麼是你想要的方式以及你想要修復或改變的方式。 – jwpfox
在ListView的每一行中，我都有自行車的名稱，選取器和自行車的價格。名稱和價格是從API中提取的。現在，當我更改1選取器的值時，所有選取器都會更改。因爲我使用狀態'數量'爲所有采摘。我只想改變1個選擇器。隨着有人想租的自行車數量，我想把它與自行車的價格相乘。這更清楚嗎？我是新手，這是我在stackoverflow上的第一個問題。 – Chewie121980