使用 KeyBoard 避免在 Overlay 中查看的问题

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' 为您提供设备的宽度和高度，然后计算这些值的百分比并将它们提供给您的视图。

使用 KeyBoard 避免在 Overlay 中查看的问题

Problem Using KeyBoard avoiding view in Overlay

reactjs

react-native

react-native-android

react-native-ios

react-native-flatlist