[英]Two buttons sharing a row in react-native
我有两个看起来像这样的按钮
这是代码
render = () => (
<Image
source={require('../../images/login.jpg')}
style={[AppStyles.containerCentered, AppStyles.container, styles.background]}
>
<Image
source={require('../../images/logo.png')}
style={[styles.logo]}
/>
<Spacer size={200} />
<View style={[AppStyles.row, AppStyles.paddingHorizontal]}>
<View style={[AppStyles.flex1]}>
<Button
title={'Login'}
icon={{ name: 'lock' }}
onPress={Actions.login}
/>
</View>
</View>
<Spacer size={10} />
<View style={[AppStyles.row, AppStyles.paddingHorizontal]}>
<View style={[AppStyles.flex1]}>
<Button
title={'Sign up'}
backgroundColor={'#FB6567'}
icon={{ name: 'face' }}
onPress={Actions.signUp}
/>
</View>
</View>
</Image>
)
我希望按钮占据一行并可能占用40% - 40%的空间,剩下的20%用于填充。 我怎么能让他们占据一排?
您需要定义一个flexDirection
设置为row
的容器,并根据您想要填充的位置使用justifyContent
:
render() {
return (
<View style={styles.container}>
<View style={styles.button} />
<View style={styles.button} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between'
},
button: {
backgroundColor: 'green',
width: '40%',
height: 40
}
});
更改space-between
以space-around
,如果你想填充分发到边了。 ( 演示 )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.