react-native 按钮填充/边距顶部不起作用答案

【问题标题】：react-native buttons padding/margin top don't workreact-native 按钮填充/边距顶部不起作用
【发布时间】：2020-07-26 20:58:13
【问题描述】：

我正在尝试让按钮登录和注册与它们上方的徽标有顶部间距，但到目前为止没有 css 属性起作用

我尝试填充顶部/边距顶部和顶部，但都不起作用，左侧边距也不起作用

这里是世博小吃链接： https://snack.expo.io/@mai95/intelligent-tortillas

<Button title="Login" style={{top:300}} onPress={() => navigation.navigate("Details")} >
     <Text style={styles.loginText}>LOG IN</Text>
   </Button>  
   <Button title="Register"style={{top:300,marginLeft:50}}  onPress={() => navigation.navigate("Details")} >
     <Text style={styles.loginText2}>Register</Text>
   </Button>

知道有什么问题吗？

【问题讨论】：

标签： react-native expo

【解决方案1】：

styles 属性在 <Button /> 组件上不可用。您应该考虑将按钮包装在 div 中，如下所示：

   <View style={{ flexDirection: 'row', marginTop: 100 }}>
        <View style={{ marginHorizontal: 25 }}>
          <Button title="Login" onPress={() => navigation.navigate('Details')}>
            <Text style={styles.loginText}>LOG IN</Text>
          </Button>
        </View>
        <View style={{ marginHorizontal: 25 }}>
          <Button
            title="Register"
            onPress={() => navigation.navigate('Details')}>
            <Text style={styles.loginText2}>Register</Text>
          </Button>
        </View>
      </View>

【讨论】：

【解决方案2】：

MarginTop 应该在一个容器中 <View/>

这里是使用 marginTop 的 sn-p：

<View style={{flexDirection:'row', marginTop: 30}}>
    <Button title="Login" onPress={() => navigation.navigate("Details")} >
     <Text style={styles.loginText}>LOG IN</Text>
   </Button>  
   <Button title="Register"  onPress={() => navigation.navigate("Details")} >
     <Text style={styles.loginText2}>Register</Text>
   </Button>
</View>

【讨论】：