react-native - 无法在 native View 容器的子项之间添加空间

Question

我有一个父 View 容器，它包含另一个具有两个按钮组件的 View 。我需要在按钮组件之间留出一个空间，我将 justify-content 添加到 subview 容器中，但它不起作用。

代码

import React,{Component} from 'react';
import { View,Image,StyleSheet,Dimensions } from 'react-native';
import { Card,Button,Avatar } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';
export default class WelcomePage extends Component {
    render() {
        const {navigate}=this.props.navigation
        return (
            <View style={{flexDirection:'column',flex:1,alignItems:'center',justifyContent: 'flex-start'}}>
            <Avatar
              width={Dimensions.get('window').width}
              containerStyle={{flex:85}}
              avatarStyle={{flex:85}}
              imageProps={{resizeMode:'cover'}}
              source={require('../assets/images/logo.png')}
              onPress={() => console.log("Works!")}
              activeOpacity={0.7}
            />
            <View style={{flexDirection:'row',flex:15,marginTop:10,justifyContent:'space-between'}}>
                <Button  large title='LOGIN' icon={<Icon name="user-secret" size={25} color="white" />} buttonStyle={{height:50,width:130,backgroundColor:"#b3b3b3"}} titleStyle={{fontWeight:"700"}} containerViewStyle={{borderRadius:5}} borderRadius={5} />
                <Button  large title='REGISTER'  icon={<Icon name="user-plus" size={25} color="white" />} buttonStyle={{height:50,width:130,backgroundColor:"#b3b3b3"}} titleStyle={{fontWeight:"700"}} onPress={() => navigate('register')} containerViewStyle={{borderRadius:5}} borderRadius={5} />
            </View> 
            </View>
        )
    }
}  

输出

如何使用 flexbox 算法在按钮组件之间添加空间？

Answer 1

您需要从父包装器中删除样式 alignItems:'center'。

由于 alignItems: 'center' 将您的子元素与 center 对齐，因此您看不到 justifyContent: 'space-between' 的效果

因此修改你的代码如下

<View style={{flexDirection:'column',flex:1,justifyContent: 'flex-start'}}> // Remove alignItems here
                <Avatar
                    width={Dimensions.get('window').width}
                    containerStyle={{flex:85}}
                    avatarStyle={{flex:85}}
                    imageProps={{resizeMode:'cover'}}
                    onPress={() => console.log("Works!")}
                    activeOpacity={0.7}
                />
                <View style={{flexDirection:'row',flex:15,marginTop:10,justifyContent:'space-between', paddingLeft: 20, paddingRight: 20}}> // Added some padding for a bettwer view
                    <Button  large title='LOGIN' icon={<Icon name="user-secret" size={25} color="white" />} buttonStyle={{height:50,width:130,backgroundColor:"#b3b3b3"}} titleStyle={{fontWeight:"700"}} containerViewStyle={{borderRadius:5}} borderRadius={5} />
                    <Button  large title='REGISTER'  icon={<Icon name="user-plus" size={25} color="white" />} buttonStyle={{height:50,width:130,backgroundColor:"#b3b3b3"}} titleStyle={{fontWeight:"700"}} onPress={() =>{}} containerViewStyle={{borderRadius:5}} borderRadius={5} />
                </View>
            </View>