使組件適合屏幕，無滾動 React-native

Question

我有兩個組件的圖像和視圖，我試圖將兩者都放在屏幕上，但它會溢出，我不想實現 scrollView。

問題是 Google 登錄按鈕退出屏幕

這是我的方法

<KeyboardAwareScrollView
                showsVerticalScrollIndicator={false}
                style={{ backgroundColor: 'white' }}
                resetScrollToCoords={{ x: 0, y: 0 }}
                scrollEnabled={this.state.keyboardOpened}
            >
                    <View style={{ backgroundColor: "white",flex:1}}>
                        <Image
                            style={{ width: "100%",height:200, backgroundColor: "white" }}
                            source={require('./assets/login.gif')}
                            resizeMode={"contain"}
                        />
                    </View>
                        <View>
                    {this.renderLoginDetails()}
                    </View>
            </KeyboardAwareScrollView>

這是它的結果

Answer 1

查找設備屏幕的高度。

import { Dimensions } from 'react-native';
const windowHeight = Dimensions.get('window').height;

 <KeyboardAwareScrollView
            showsVerticalScrollIndicator={false}
            style={{ backgroundColor: 'white' }}
            resetScrollToCoords={{ x: 0, y: 0 }}
            scrollEnabled={this.state.keyboardOpened}
            >
        <View style={{ backgroundColor: "white",flex:1, height: windowHeight*0.04}}>
              <Image
                  style={{ width: "100%",height:200, backgroundColor: "white" }}
                  source={require('./assets/login.gif')}
                  resizeMode={"contain"}/>
       </View>
       <View style={{height: windowHeight*0.06}}>
             {this.renderLoginDetails()}
        </View>
</KeyboardAwareScrollView>