javascript - 带有 ScrollView 的 Flex 按钮 React Native

Question

我到处搜索，试图找到我遇到的这个问题的答案。基本上，我有一个带有很多复选框的 ScrollView 。我想在底部有几个按钮，它们是“全选”“全选”类型的操作。我希望按钮同样占据可用空间(例如，拉伸(stretch)以便没有间隙)。我为按钮和容器尝试了很多不同的样式组合，但没有成功。

我这里有一个工作示例，但为了方便起见，我也会发布代码。任何帮助或指导将不胜感激。

编辑:按照建议，我查看了 react-native-elements 中的 ButtonGroup，但我不喜欢按钮的方式保持选择。另外，我觉得这是一个常见问题，我还没有找到在 React Native 中使用 Flexbox 的解决方案。

https://snack.expo.io/BJNEmvMvQ

import React, { Component } from 'react';
import { View, Text, ScrollView } from 'react-native';
import { CheckBox, ListItem, Button } from 'react-native-elements';

export default class App extends Component {
  list = [ list of objects to render checkboxes (see snack for example  ];

  renderItem = (item, i) => {
    return (
      <View key={i}>
        <CheckBox
          title={item.Description}
          checkedIcon="check"
          uncheckedIcon="times"
        />
      </View>
    )
  }
  render() {
    return (
      <View style={{ flex: 1 }}>
        <ScrollView>{this.list.map(this.renderItem)}</ScrollView>
        <View style={{ flexDirection: 'row',
              justifyContent: 'center' }}>
        // have tried in the view style above: flexGrow, alignItems, and others
          <Button
            title="hello"
            containerViewStyle={{ borderWidth: 2,
            borderColor: 'black'}}
            // have tried using flexGrow, alignSelf  
            // have also tried using 'buttonStyle' here instead of 'containerViewStyle'
          />
          <Button
            title="hello"
            containerViewStyle={{ borderWidth: 2,
            borderColor: 'black' }}
          />
          <Button
            title="hello"
            containerViewStyle={{ borderWidth: 2,
            borderColor: 'black' }}
          />
          <Button
            title="hello"
            containerViewStyle={{ borderWidth: 2,
            borderColor: 'black' }}
          />
        </View>
      </View>
    );
  }
}

Answer 1

更改 React native 按钮样式存在限制。解决您的问题的快速方法是用 View 包裹 Button。

这是工作演示:https://snack.expo.io/SkIXThMw7

    <View style={{ flex: 1 }}>
            <ScrollView>{this.list.map(this.renderItem)}</ScrollView>
            <View style={{flexDirection: 'row'}}>
                <View style={{flex:1}} >
                    <Button
                        title="hello"
                        containerViewStyle={styles.buttonStyle}
                    >
                    </Button>
                </View>
                <View style={{flex:1}} >
                    <Button
                        title="hello"
                        containerViewStyle={styles.buttonStyle}
                    >
                    </Button>
                </View>
                <View style={{flex:1}} >
                    <Button
                        title="hello"
                        containerViewStyle={styles.buttonStyle}
                    >
                    </Button>
                </View>
                <View style={{flex:1}} >
                    <Button
                        title="hello"
                        containerViewStyle={styles.buttonStyle}
                    >
                    </Button>
                </View>
            </View>
    </View>

const styles = StyleSheet.create({
    buttonStyle: {
      borderWidth: 1,
      borderColor: 'black',
      marginLeft: 0,
      marginRight: 0,
      paddingLeft: 0,
      paddingRight: 0
   },

});