在叠加中使用KeyBoard避开视图的问题。

Question

有谁能帮我解决这个问题其实我是新来的React Native，我已经尝试了几种方法来克服这个问题，但都没有用，请帮我解决这个问题，我不想让键盘干扰叠加。

            <View style={{height:"9%"}}>

                <Button title="Add A New ToDO" onPress={this.onPressOpenOverLay}  buttonStyle={{height:"100%",borderBottomLeftRadius:30,borderBottomRightRadius:30}}/>

                <Overlay isVisible={this.state.setVisible} 
                onBackdropPress={this.onPressCloseOverLay} 
                animationType="fade" 
                overlayStyle={{height:"70%",width:"90%",borderRadius:20,alignItems:"center",paddingTop:"15%"}}>

                        <Text style={{fontSize:19,color:"#0288D1",fontWeight:"bold"}}>Add A New ToDo</Text>

                        <TextInput style={styles.input} 
                            placeholder="Email ID"
                            autoCapitalize="none" 
                            underlineColorAndroid="transparent"
                            onChangeText={email => this.setState({ email })}
                            value={this.state.email}
                            >

                        </TextInput>

                </Overlay>


            </View>

            <FlatList

                style={{marginTop:"2%"}}
                data={this.state.data}
                renderItem={this._renderMyList}
               keyExtractor={(item, index) => index.toString()}
               bounces={true}

            />

            </SafeAreaView>
    )
}

}

Answer 1

如果你用百分比来设置你的宽度或高度，那么当UI布局发生一些变化时，如键盘出现时，它很容易发生变化。import {Dimension} from 'react-native' 给你设备的宽度和高度，然后计算这些值的百分比，并将它们提供给你的视图。