Как разместить представление внизу ScrollView?

Question

Я хотел бы создать экран с ScrollView с некоторыми полями ввода в нем и кнопкой (фактически 2 кнопки в обычном представлении) в нижней части экрана.Это должно быть довольно просто, НО, Я хочу расположить свою кнопку в самом низу экрана , даже если в ScrollView недостаточно элементов для заполнения всего экрана.Я мог бы использовать абсолютное позиционирование, НО мой ScrollView может быть больше (выше), чем мой экран, и в этом случае кнопка должна быть в конце ScrollView.(Так что это будет за пределами экрана, что означает, что пользователь должен прокрутить вниз, чтобы увидеть кнопку).

Я много чего пробовал, но кнопка всегда появляется сразу после других элементов внутриScollView.

На снимке вид прокрутки имеет синюю рамку, а обычный вид, содержащий кнопки, имеет черную рамку.

Любое предложение приветствуется.

Answer 1

Нашли лучшее решение.

Ключом является свойство contentContainerStyle (doc: https://facebook.github.io/react-native/docs/scrollview#contentcontainerstyle). ". Эти стили будут применены к контейнеру содержимого представления прокрутки, который охватывает вседочерних представлений. "

После установки flexGrow: 1, justifyContent: 'space -ween', flexDirection: 'column' в contentContainerStyle, можно установить justifyContent: 'flex-start ' для верхнего представления контейнера с текстом и justifyContent:' flex-end ' для нижнего просмотра контейнера с кнопками.

        <ScrollView
          contentContainerStyle={{ flexGrow: 1, justifyContent: 'space-between', flexDirection: 'column' }}
          style={{backgroundColor: 'white', paddingBottom: 20}}>
          <View style={{ flex: 1, justifyContent: 'flex-start' }}>
              <Text>Some text with different length in different cases, or some input fileds.</Text>
          </View>
          <View style={{ flex: 1, justifyContent: 'flex-end' }}>
            <View>
              <TouchableOpacity
                style={[commonStyles.greenButton, styles.buttonPadding]} >
                <Text style={commonStyles.greenButtonTitle}>Next</Text>
              </TouchableOpacity>
            </View>
            <View>
              <TouchableOpacity
                style={styles.cancelButtonContainer} >
                <Text style={styles.cancelButton}>Cancel</Text>
              </TouchableOpacity>
            </View>
          </View>
        </ScrollView>

Answer 2

Я нашел обходной путь для этого.

Основная идея состоит в том, чтобы установить высоту просмотра с текстами и полями ввода , чтобы точно соответствовать высоте экранаминус вид, который содержит кнопки .

Задача состоит в том, чтобы рассчитать эту высоту.Мне помог ответ Абхишека Кумара (https://stackoverflow.com/a/41398953/4109477) См. Мой код ниже:

         import { View, ScrollView, Text, TouchableOpacity, Dimensions } from 'react-native';

         const screenHeight = Dimensions.get('window').height;

          class MyClass extends React.Component {

          constructor(props) {
            super(props);
            this.state = {buttonViewHeight: 0};
          }

          find_dimesions(layout){
            this.setState({buttonViewHeight: layout.height});
          }
          render() {
            return (
              <View style={{minHeight: screenHeight, flex: 1, alignItems: 'center'}}>
                <ScrollView style={{minHeight: screenHeight}}>
                 <View style={{minHeight: screenHeight}}>
                    <View style={{minHeight: screenHeight - this.state.buttonViewHeight, borderWidth: 2, borderColor: 'red', alignItems: 'center', flex: 1}]}>
                      <Text>Some text with different length in different cases, or some input fileds.</Text>
                    </View>
                    <View onLayout={(event) => { this.find_dimesions(event.nativeEvent.layout) }} style={{paddingBottom: 50, flex: 1, borderWidth: 2, borderColor: 'green'}}>
                      <TouchableOpacity
                        style={[commonStyles.greenButton, styles.buttonPadding]} >
                        <Text style={commonStyles.greenButtonTitle}>Next</Text>
                      </TouchableOpacity>
                      <TouchableOpacity
                        style={styles.cancelButtonContainer} >
                        <Text style={styles.cancelButton}>Cancel</Text>
                      </TouchableOpacity>
                    </View>
                  </View>
                </ScrollView>
              </View>
          }
   }

На рисунке ниже вы можете увидеть результат

Это решение будет вызывать эффект, подобный анимации, поскольку представление визуализируется несколько раз из-за изменения высоты представления. Вид кнопки «исчезает» при открытии экрана.

Если вы найдете лучшее решение, пожалуйста, дайте мне знать!