android - 弹性包装 : 'wrap' items padding issue in 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 的 Button 没有样式作为 prop ( 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>

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