使组件适合屏幕，无滚动 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>