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

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 的 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）作为道具的按钮形式 react-native-elements 。 或者您可以使用 react-native 中的 TouchableOpacity ，它具有样式作为道具。