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

Question

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

这是代码

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％用于填充。我怎么能让他们占据一排？。

Answer 1

您需要定义一个SharedPreferences sharedPreferences = PreferenceManager.getDefaultSharedPreferences(getApplicationContext()); 设置为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。 （Demo）