React native 如何在屏幕底部定位组件
我正在尝试将SegmentedControlIOS组件定位到屏幕底部:React native 如何在屏幕底部定位组件,react-native,react-native-flexbox,React Native,React Native Flexbox,我正在尝试将SegmentedControlIOS组件定位到屏幕底部: return ( <View style={styles.container}> <Button title="toggle names" onPress={this.toggleContacts} /> <Button title="sort" onPress={this.sort} /> <Button title="New contact" on
return (
<View style={styles.container}>
<Button title="toggle names" onPress={this.toggleContacts} />
<Button title="sort" onPress={this.sort} />
<Button title="New contact" onPress={this.toggleForm} />
{ this.state.showForm &&
<AddContactForm
addContact={this.addContact}/>
}
{this.state.show && this.state.selectedIndex === 0 &&
<ScrollView >
{this.state.contacts.map(contact=>(
<Row {...contact}/> ))}
</ScrollView>}
{this.state.show && this.state.selectedIndex === 1 &&
<FlatList
data={this.state.contacts}
keyExtractor = { (item, index) => index.toString() }
renderItem={renderItem}>
</FlatList>}
{this.state.show && this.state.selectedIndex === 2 &&
<ContactsList
contacts={this.state.contacts}>
</ContactsList>}
<View flex bottom style={{flex:1,}}>
<SegmentedControlIOS
values={['ScrollView', 'FlatList','SectionList']}
selectedIndex={this.state.selectedIndex}
onChange={(event) => {
this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex});
}} />
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
// alignItems: 'flex-start',
paddingTop: Constants.statusBarHeight + 25,
},
row: {
padding:20,
},
input: {
padding:5,
borderColor:'black',
borderWidth:1,
},
});
返回(
{this.state.showForm&&
}
{this.state.show&&this.state.selectedIndex==0&&
{this.state.contacts.map(contact=>(
))}
}
{this.state.show&&this.state.selectedIndex==1&&
index.toString()}
renderItem={renderItem}>
}
{this.state.show&&this.state.selectedIndex==2&&
}
{
this.setState({selectedIndex:event.nativeEvent.selectedSegmentIndex});
}} />
)
}
}
const styles=StyleSheet.create({
容器:{
弹性:1,
背景颜色:“#fff”,
//alignItems:'flex start',
paddingTop:Constants.statusBarHeight+25,
},
行:{
填充:20,
},
输入:{
填充:5,
边框颜色:'黑色',
边框宽度:1,
},
});
{
this.setState({selectedIndex:event.nativeEvent.selectedSegmentIndex});
}} />