React 本机边距：'auto' 在网络上工作但不在设备上工作

Question

我正在构建一个在 expo dev 上使用 React Native 的应用程序。我正在尝试在左上角添加一个按钮，该按钮与右侧的某些文本相邻，为此我使用了 marginRight: 'auto' 并且它确实在网络版本上按预期显示但在应用程序版本上Android 它看起来居中，好像边距样式被忽略了，有什么解决办法吗？

<View style={styles.header}>
  
  <View style={styles.headerTop}>
    <Text style={styles.headerText}>Question {currentQuestion+1}/{questions.length}</Text>
    <TouchableOpacity 
      onPress={() => navigation.navigate("Home")}
      style= {styles.exitButton}
      >
      <Text style={styles.buttonText}>Exit</Text>
      </TouchableOpacity>
      </View>
    <Text style={styles.timer}>{timer}</Text>
  </View>

    header: {
    flexGrow: 0,
    padding: 8,
  },
  headerTop: {
    flexDirection: 'row-reverse',
  },
  headerText: {
    fontSize: 24,
    textAlign: 'right',
  },
exitButton: {
    padding: 12,
    paddingHorizontal: 12,
    backgroundColor: '#1BA7F9',
    borderRadius: 12,
    marginRight: 'auto',
  },
  buttonText: {
    fontSize: 20,
  }

Answer 1

您已为 header-top

指定 'row-reverse'

headerTop: {
    flexDirection: 'row-reverse',
  },

因此，请尝试使用 marginLeft: 'auto',

而不是 marginRight: 'auto',

exitButton: {
        padding: 12,
        paddingHorizontal: 12,
        backgroundColor: '#1BA7F9',
        borderRadius: 12,
        marginLeft: 'auto',
      },

这应该可以解决问题。我在模拟器中试过了，效果很好。附上截图。

React 本机边距：'auto' 在网络上工作但不在设备上工作

React native margin: 'auto' working on web but not on device

margin

flexbox

react-native

expo