两个按钮在 react-native 中共享一行 [英] 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% 用于填充.我怎么能让它们占据一排?.

I want the buttons to occupy one row and possibly share 40% - 40% of the space with the rest of the 20% going to the padding. How can i have them occupy one row?.

推荐答案

您需要定义一个容器，将 flexDirection 设置为 row 并使用 justifyContent 取决于您想要填充的位置:

You'd need to define a container with flexDirection set to row and use justifyContent depending on where you want your padding:

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.(演示)

Change space-between to space-around if you want the padding to be distributed to the sides too. (Demo)

这篇关于两个按钮在 react-native 中共享一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！