帶有滾動視圖的 Flex 按鈕 React Native

Question

我已經上下搜索，試圖為我遇到的這個問題找到答案。 基本上，我有一個滾動視圖，其中包含許多復選框。 我想在底部有幾個按鈕，它們是“全選”“全選”類型的操作。 我希望按鈕平等地占用可用空間（例如拉伸以便沒有間隙）。 我為按鈕和容器嘗試了大量不同的樣式組合，但都沒有成功。

我在這里有一個工作示例，但為了方便起見，我也會發布代碼。 任何幫助或指導將不勝感激。

編輯：正如建議的那樣，我從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
   },

});

Answer 2

在react-native-elements幫助下，我能夠解決這個問題。 我需要從containerViewStyle上默認的按鈕中刪除邊距，並添加一個flex: 1 。 更新的小吃在這里。 它與其他答案之一基本相同，只是您不必將按鈕包裝在視圖中，只需將樣式應用於每個按鈕的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在這里給出請檢查。