在按钮之间添加空格

Question

我想在按钮之间添加空格，但下面是我的代码，它不起作用。我需要在代码中添加什么？

render(){
    return (
        <View>
            <Text>Home</Text>
            <Button style={styles.button}
                title='Add '
            />
            <Button style={styles.button}
                title='Search/Update'
            />
        </View>


    )
}

}

const styles = StyleSheet.create({
    button: {
        marginBottom: 20,
        padding: 30
    },
})

Answer 1

最简单的方法是在两个按钮之间添加间距视图：

<View>
  <Text>Home</Text>
  <Button style={styles.button} title='Add' />
  <View style={styles.space} /> // <------------------------- right here
  <Button style={styles.button} title='Search/Update' />
</View>

const styles = StyleSheet.create({
  button: {
    marginBottom: 20,
    padding: 30
  },
  space: {
    width: 20, // or whatever size you need
    height: 20,
  },
})

Answer 2

您可以将此样式应用于视图组件，以便在两个按钮之间获得空间。
还可以Dimensions从react-native导入并根据需要调整View的宽度。

import { Dimensions } from 'react-native';

<View style={{
    width:Dimensions.get("window").width * 0.5,
    display:"flex",
    justifyContent:"space-evenly",
    alignItems: "center"

}}>
  <Text>Home</Text>
  <Button 
      style={styles.button}
      title='Add '
  />

  <Button 
      style={styles.button}
      title='Search/Update'
   />
</View>