如何在 Expo 中使用保证金？答案

【问题标题】：How to use Margins in Expo?如何在 Expo 中使用保证金？
【发布时间】：2020-06-30 06:51:52
【问题描述】：

我正在 Expo (Snack) 上的 Newsletter App 上创建这个项目，我得到了这个：

Web Preview 也是我期望在 Android 应用中的输出。

据我说，边距有问题。

这是我使用的按钮组件：

<View style={{ flex: 1 }}>
  <TouchableOpacity style={this.props.style}
    onPress={this.props.onPress}>
    <Text
      style={{
        alignSelf: 'center',
        justifySelf: 'center',
        fontSize: 18,
      }}
      onPress={this.props.onPress}>
      {this.props.name}
    </Text>
  </TouchableOpacity>
</View>

// Styles: 

borderColor: 'black',
borderWidth: 2,
marginHorizontal: 'auto',
marginVertical: 15,
padding: 5,
width: 200,
height: 60,
justifyContent: "center",
borderRadius: 10

Full Code

【问题讨论】：

标签： reactjs react-native expo react-navigation

【解决方案1】：

您应该将此样式添加到您的按钮容器中，它将使您的元素弯曲并居中：

<View style={{
    flex: 1, 
    justifyContent: 'center',
    alignItems: 'center'}}>
    <Button name="Read a Joke" style={styles.button}
            onPress={() => { this.props.navigation.navigate('JokeScreen') }} />
    <Button name="Horoscope" style={styles.button}
            onPress={() => { this.props.navigation.navigate('FutureScreen') }} />
    <Button name="Top News" style={styles.button}
            onPress={() => { this.props.navigation.navigate('NewsScreen') }} />
    <Button name="Weather" style={styles.button}
            onPress={() => { this.props.navigation.navigate('WeatherScreen') }} />
</View>
    ```

【讨论】：

非常感谢！这为我节省了很多时间。