flexwrap：'wrap' React Native 中的项目填充问题

Question

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

呈现 Utility & Sequences 按钮的代码如下：

<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 的按钮没有样式作为属性 (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>

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

flexwrap：'wrap' React Native 中的项目填充问题

flexwrap: 'wrap' items padding issue in React Native

android

react-native

react-native-android

react-native-flexbox