Гибкие кнопки с прокруткой React Native

Question

Я искал все выше и ниже, чтобы попытаться найти ответ на эту проблему, которая у меня возникла. По сути, у меня есть прокрутка с множеством пунктов, которые являются флажками. Я хочу, чтобы внизу было несколько кнопок типа «выбрать все» и «выбрать нет». Я хочу, чтобы кнопки одинаково занимали доступное пространство (например, растягивались, чтобы не было зазоров). Я безуспешно пробовал множество различных комбинаций стилей для кнопок и контейнеров.

У меня есть рабочий пример, но я также выложу код для удобства. Любая помощь или направление будет принята с благодарностью.

Редактировать: Как и предполагалось, я посмотрел на ButtonGroup из react-native-elements, но мне не понравилось, как кнопки оставались выделенными. Кроме того, я чувствую, что это распространенная проблема, которую мне еще предстоит найти с помощью 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. Обновленная закуска здесь . По сути, это то же самое, что и один из других ответов, за исключением того, что вам не нужно переносить кнопки на видах, просто примените стили к 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, которая является частью response-native-elements, и внести следующие изменения, приведенные в примере с закусками, в вашу функцию рендеринга:

Ссылка для вышеуказанного решения https://snack.expo.io/Hkdg7OGv7 приведена здесь, пожалуйста, проверьте.