Android flexwrap:'；包装'；React Native中的项目填充问题

我有一个无法解决的问题。 请看此屏幕截图：

呈现实用程序和序列按钮的代码如下所示：

<Fragment>
    <Text style={styles.sectionTitle}>Utility</Text>
    <View style={styles.buttonContainer}>
        <Button onPress={this.readErrorObject} style={styles.button} title='Get Error' />
        <Button onPress={this.readDump} style={styles.button} title='Read Dump' />
        <Button onPress={this.readLog} style={styles.button} title='Read Log' />
        <Button onPress={this.clearError} style={styles.button} title='Clear Error' />
    </View>
    <Text style={styles.sectionTitle}>Sequences</Text>
    <View style={styles.buttonContainer}>
       <Button onPress={this.firstRun} style={styles.button} title='First Run' />
       <Button onPress={this.resetDevice} style={styles.button} title='Reset Device' />
    </View>
</Fragment>

当第四个按钮下降到下一行时，我想在新行和上一行之间有一个间距。 我尝试为每个有边距的按钮添加样式，但没有任何区别。 我错过了什么？

---

提前感谢。

实际上，react native的按钮没有作为道具的样式（），因此您可以使用View和apply样式包装每个按钮

    <View style={styles.buttonContainer}>
              <View style={{margin:30}}>
              <Button onPress={this.readErrorObject} style={styles.button} title='Get Error' />
              </View>
              <View style={{margin:30}}>
              <Button onPress={this.readDump} style={styles.button} title='Read Dump' />
              </View>
              <View style={{margin:30}}>
              <Button onPress={this.readLog} buttonStyle={styles.button} title='Read Log' />
              </View>
              <View style={{margin:30}}>
              <Button onPress={this.clearError} buttonStyle={styles.button} title='Clear Error' />
              </View>
   </View>

或您可以使用Button form react本机元素，该元素将buttonStyle（）作为属性。

---

或您可以使用react native中的TouchableOpacity，它具有作为道具的样式。

您是否尝试从buttonContainer中删除

flex:1

？很多时候

flex

行为会覆盖静态边距

    <View style={styles.buttonContainer}>
              <View style={{margin:30}}>
              <Button onPress={this.readErrorObject} style={styles.button} title='Get Error' />
              </View>
              <View style={{margin:30}}>
              <Button onPress={this.readDump} style={styles.button} title='Read Dump' />
              </View>
              <View style={{margin:30}}>
              <Button onPress={this.readLog} buttonStyle={styles.button} title='Read Log' />
              </View>
              <View style={{margin:30}}>
              <Button onPress={this.clearError} buttonStyle={styles.button} title='Clear Error' />
              </View>
   </View>