flexwrap：React Native中的“包装”项目填充问题

Question

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

呈现“工具和序列”按钮的代码如下：

<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>

样式

const styles = StyleSheet.create({
  sectionTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#000000'
  },
  buttonContainer: {
    flex: 1,
    flexWrap: 'wrap',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignContent: 'space-between'
  },
  button: {
    marginVertical: 8 // DOESN'T WORK
  }
})

当第四个按钮下降到下一行时，我想在新行和上一行之间留一个间距。 我尝试为每个具有边距的按钮添加样式，但这没有什么区别。 我在这里想念什么吗？ 预先感谢。

Answer 1

实际上，react-native的Button不具有样式作为属性（https://facebook.github.io/react-native/docs/button.html），因此您可以使用View包裹每个按钮并应用样式

    <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>

或，您可以使用具有buttonStyle（https://react-native-training.github.io/react-native-elements/docs/button.html#buttonstyle）作为属性的Button形式react-native-elements。 或，您可以使用具有样式作为道具的react-native中的TouchableOpacity。