两个按钮共享反应原生的行

发布时间：2020-12-15 09:33:25 所属栏目：百科来源：网络整理

导读：我有两个看起来像这样的按钮这是代码 render = () = ( Image source={require('../../images/login.jpg')} style={[AppStyles.containerCentered,AppStyles.container,styles.background]} Image source={require('../../images/logo.png')} style={[styles

我有两个看起来像这样的按钮

enter image description here

这是代码

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
  }
});

如果您希望将填充分布到侧面,请将空间更改为空间. (Demo)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!