ScrollView 하단에 보기를 배치하는 방법?

ScrollView 하단에 보기를 배치하는 방법?

일부 입력 필드가 있는 ScrollView와 화면 하단에 버튼(실제로 일반 뷰의 버튼 2개)이 있는 화면을 만들고 싶다.이것은 꽤 쉬울 것이다. 그러나 나는 ScrollView에 전체 화면을 채울 만한 요소가 충분하지 않더라도 화면 맨 아래에 버튼을 놓고 싶다.절대 포지셔닝을 사용할 수 있지만 내 ScrollView는 내 화면보다 더 클 수 있고, 이 경우 버튼은 ScrollView의 끝에 있어야 한다.(따라서 화면 밖이 될 것이고, 이는 사용자가 버튼을 보기 위해 아래로 스크롤해야 함을 의미한다.)

나는 많은 것을 시도해 보았지만, 버튼은 항상 스콜뷰 내부의 다른 요소들을 바로 따라온다.

사진에서 스크롤 뷰의 테두리는 파란색이고, 버튼이 포함된 일반 뷰의 테두리는 검은색이다.

어떤 제안이라도 고맙게 생각한다.

최고의 해결책을 찾았다.

핵심은 contentConttainerStyle 속성(doc: https://facebook.github.io/react-native/docs/scrollview#contentcontainerstyle))이다."이러한 스타일은 모든 하위 보기를 감싸는 스크롤 보기 내용 컨테이너에 적용될 것이다."

flexGrow:1, prittyContent: 'space-between', contentContainerStyle의 flexDirection: 'column'을 설정한 후, 텍스트가 있는 상부 용기 뷰에 대해 prittyContent: 'flex-start'를 설정할 수 있으며, 버튼을 사용하여 하단 용기 뷰에 대해 prittent: '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>;

<ScrollView
      contentContainerStyle={{
          flexGrow: 1,
          justifyContent: 'flex-end',
      }}>
</ScrollView>

나는 이것에 대한 해결 방법을 찾았다.

화면의 높이에서 버튼이 포함된 보기를 뺀 화면 높이와 정확히 일치하도록 텍스트와 입력 필드로 View의 높이를 설정하는 것이 주요 아이디어다.

문제는 이 높이를 계산하는 것이다.아비셰크 쿠마르의 대답이 도움이 되었다(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>
          }
   }

아래 사진에서 당신은 결과를 볼 수 있다.

이 솔루션은 뷰의 높이 변경으로 인해 뷰가 여러 번 렌더링될 때 애니메이션과 같은 효과를 유발할 수 있다.화면을 열 때 버튼의 "fade in"이 표시된다.

더 좋은 해결책을 찾으면 나에게 알려줘!

참조URL: https://stackoverflow.com/questions/52539528/how-to-position-a-view-at-the-bottom-of-a-scrollview