Добавить пробел между кнопкой

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

Или вы можете использовать так:

<View>
    <View style={{ flex: 1, marginBottom: 10 }}>
      <Button title="Add" />
    </View>
    <View style={{ flex: 1 }}>
      <Button title="Search/Update"  />
    </View>
</View>

Answer 3

Вы можете применить этот стиль к компоненту View, чтобы получить пространство между двумя кнопками. Также импортируйте Dimensions из реактивной системы и настройте ширину просмотра в соответствии с вашими потребностями.

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>