PickerIOS
10504 ワード
PickerIOSはiOSでしか使用できない選択コンポーネントであり、iOSプラットフォーム上のUIIPickerViewに対応しています.中国語のネット上の詳しい使用demohttp://reactnative.cn/docs/0.26/pickerios.html#contentあ、でもdemoを押して叩くだけではPickerIOSコンポーネントが表示されません.demoには
itemStyle
という属性が使用されていないことが分かった.import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
PickerIOS
} from 'react-native';
var PickerItemIOS = PickerIOS.Item;
var CAR_MAKES_AND_MODELS = {
amc: {
name:'AMC',
models:['AMX','Concord','Eagle','Gremlin','Matador','Pacer']
},
alfa: {
name:'Alfa-Romeo',
models:['159','4C','Alfasud','Brera','GTV6','Giulia','MiTo','Spider']
},
aston: {
name:'Aston Martin',
models:['DB5','DB9','DBS','Rapide','Vanquish','Vantage']
},
audi: {
name:'Audi',
models:['90','4000','5000','A3','A4','A5','A6','A7','A8','Q5','Q7']
},
austin: {
name:'Austin',
models:['America','Maestro','Maxi','Mini','Montego','Princess']
},
borgward: {
name:'Borgward',
models:['Hansa','Isabella','P100']
},
buick: {
name:'Buick',
models:['Electra','LaCrosse','LeSabre','Park Avenue','Regal','Roadmaster','Skylark']
},
cadillac: {
name:'Cadillac',
models:['Catera', 'Cimarron', 'Eldorado', 'Fleetwood', 'Sedan de Ville']
},
chevrolet: {
name: 'Chevrolet',
models: ['Astro', 'Aveo', 'Bel Air', 'Captiva', 'Cavalier', 'Chevelle',
'Corvair', 'Corvette', 'Cruze', 'Nova', 'SS', 'Vega', 'Volt']
}
};
class PickerIOSDemo extends Component {
constructor(props) {
super(props);
this.state = {
carMake:'cadillac',
modelIndex:3
}
}
render() {
var make = CAR_MAKES_AND_MODELS[this.state.carMake];
var selectionString = make.name + ' ' + make.models[this.state.modelIndex];
return (
Please choose a make for your car:
//demo ,
itemStyle={{width: 200,height: 200}}
selectedValue={this.state.carMake}
onValueChange={(carMake) => this.setState({carMake:carMake,modelIndex:0})}>
{Object.keys(CAR_MAKES_AND_MODELS).map((carMake) =>(
)) }
PickerIOS>
<Text>Please choose a model of {make.name}Text>
<PickerIOS
//demo ,
itemStyle={{width: 200,height: 200}}
selectedValue={this.state.modelIndex}
key={this.state.carMake}
onValueChange={(modelIndex) => this.setState({modelIndex:modelIndex})}>
{CAR_MAKES_AND_MODELS[this.state.carMake].models.map((modelName,modelIndex) => (
this .state.carMake + '_' + modelIndex}
value={modelIndex}
label={modelName}
/>
))}
PickerIOS>
<Text>You selected: {selectionString}Text>
View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
}
});
AppRegistry.registerComponent('PickerIOSDemo', () => PickerIOSDemo);