Question

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

码

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'。

由于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>的效果

因此，请按如下所示修改您的代码

react-scripts

未能在react-native

1 个答案: