Let's pretend my problem is I want a user to be able to select an amount of apples, and an amount of pears, with one control. I see the picker in the "Timer" section of the clock app bundled with iOS, and I like it.
I want exactly that, except instead of three columns, I want two, and instead of "hours" and "min", I want "apples" and "pears".
So far, I'm able to put two pickers next to each other, which, while not curving the items towards each other slightly as if they were on the same wheel, is good enough for me for my columns problem for now. I'm as yet unable to put titles on the rows, though.
Here's what I have:
render() {
let PickerIOSItem = PickerIOS.Item
return (
<View style={styles.container}>
<PickerIOS style={styles.column}>
<PickerIOSItem value={1} label="0" />
<PickerIOSItem value={2} label="1" />
<PickerIOSItem value={3} label="2" />
<PickerIOSItem value={4} label="3" />
<PickerIOSItem value={5} label="4" />
</PickerIOS>
<PickerIOS style={styles.column}>
<PickerIOSItem value={1} label="0" />
<PickerIOSItem value={2} label="1" />
<PickerIOSItem value={3} label="2" />
<PickerIOSItem value={4} label="3" />
<PickerIOSItem value={5} label="4" />
</PickerIOS>
</View>
);
}
styles.container
has display: flex
and flex-direction: row
, and styles.column
has width: 49%
.
Wrap it in a <View>
and use <Text>
with flex:1
should work
<View style={{ display: 'flex', flexDirection: "row" }}>
<View style={{ flex: 1, flexDirection: 'row',alignItems: 'center' }}>
<PickerIOS style={{ flex: 1 }}>
<PickerIOSItem value={1} label="0" />
<PickerIOSItem value={2} label="1" />
<PickerIOSItem value={3} label="2" />
<PickerIOSItem value={4} label="3" />
<PickerIOSItem value={5} label="4" />
</PickerIOS>
<Text>Apples</Text>
</View>
<View style={{ flex: 1, flexDirection: 'row',alignItems: 'center' }}>
<PickerIOS style={{ flex: 1 }}>
<PickerIOSItem value={1} label="0" />
<PickerIOSItem value={2} label="1" />
<PickerIOSItem value={3} label="2" />
<PickerIOSItem value={4} label="3" />
<PickerIOSItem value={5} label="4" />
</PickerIOS>
<Text>pears</Text>
</View>
</View>
Output will be something like below
Though I have not focused on design, you can make it according to your need.
我最近制作了一个支持多列的跨平台“Wheel Picker”库: https : //www.npmjs.com/package/react-native-segmented-picker
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.