Question

我搜寻了很多内容，试图找到我遇到的这个问题的答案。基本上，我有一个滚动视图，其中包含很多复选框。我想在底部有几个按钮，它们是“全选”，“全选”类型的操作。我希望按钮同样占用可用空间（例如，拉伸以便没有间隙）。我为按钮和容器尝试了很多不同的样式组合，但是没有运气。

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

编辑：根据建议，我查看了ButtonGroup中的react-native-elements，但我不喜欢如何保持选择状态。另外，我觉得这是一个普遍的问题，我还没有找到在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

更改反应本机按钮样式存在一些限制。快速解决问题的方法是将“按钮”与“视图”包装在一起。

这是工作示例：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
   },

});

Answer 2

在react-native-elements的同事的帮助下，我得以弄清楚了这一点。我需要从containerViewStyle上的默认按钮中删除边距，并添加一个flex: 1。更新的小吃是here。它与其他答案之一基本相同，只是您不必将按钮包装在视图中，只需将样式应用于每个按钮的containerViewStyle。

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' }}>
          <Button
            title="hello"
            containerViewStyle={{ borderWidth: 2, borderColor: 'black', marginLeft: 0, marginRight: 0, flex: 1 }}
          />
          <Button
            title="hello"
            containerViewStyle={{ borderWidth: 2, borderColor: 'black', marginLeft: 0, marginRight: 0, flex: 1 }}
          />
          <Button
            title="hello"
            containerViewStyle={{ borderWidth: 2, borderColor: 'black', marginLeft: 0, marginRight: 0, flex: 1 }}
          />
          <Button
            title="hello"
            containerViewStyle={{ borderWidth: 2, borderColor: 'black', marginLeft: 0, marginRight: 0, flex: 1 }}
          />
        </View>
      </View>
    );
  }
}

Answer 3

我希望尝试使用ButtonGroup（它是react-native-elements的一部分）并在快餐示例中为您的渲染函数进行以下更改：

以上提供了上述解决方案的参考https://snack.expo.io/Hkdg7OGv7，请检查。

具有scrollview React Native的Flex按钮

3 个答案: