react-native - KeyboardAvoidingView 不适用于覆盖

问题描述

我的反应本机应用程序的叠加层中有一个文本输入。我使用keyboardavoidingview 来确保键盘没有覆盖我的提交按钮，但整个覆盖层没有随着键盘移动，只有内部内容在移动。这是正在发生的事情的图像。有什么方法可以移动内容的叠加层吗？

这是我的代码

     <Overlay overlayStyle={{borderRadius:15,backgroundColor:'#f8f8f8',paddingTop:20,paddingLeft:20,height:300}} isVisible={showrevoverlay} onBackdropPress={()=>{resetoverlay()}}>
        <KeyboardAvoidingView keyboardVerticalOffset={300} style={{flex:1,alignItems:'center',justifyContent:'center'}} behavior="padding">
        <View style={{flexDirection:'column',justifyContent:'space-evenly',alignItems:'center'}}>
        <Text style={{fontWeight:'bold',textAlign:'left',width:'100%'}}>Review:</Text>
        <TextInput
            placeholder="Write review"
            style={{alignItems:'center',justifyContent:'center'}}
            style={{ height: 200,width:300, borderColor: 'gray',backgroundColor:'#eef4f6',marginTop:10}}
            onChangeText={text => setreview(text)}
            value={review}
        />
        <TO onPress={()=>{saveReview()}} style={{marginTop:10,width:100,height:50,backgroundColor:'#4B53F2',justifyContent:'center',alignItems:'center'}}><Text style={{fontFamily:'Montserrat-Bold',color:'white',fontSize:15}}>Submit</Text></TO>
        </View>
        </KeyboardAvoidingView>
    </Overlay>

标签： react-nativeoverlay

这是解决此问题的解决方案。你可以添加你的代码。

import React , {Component} from 'react';
import {View , Dimensions,ScrollView} from 'react-native';

const windowHeight = Dimensions.get('window').height;

export default class Overlay extends Component {
    render(){
        return(
            <View  style={{flex:1}}>
                <ScrollView style={{flex:1}}>
                    <View style={{width:'100%', height:windowHeight }}>
                       /*Every thing inside this will shift up with out changing style */
                    </View>
                </ScrollView>
            </View>
        )
    }
}

react-native - KeyboardAvoidingView 不适用于覆盖

问题描述

解决方案

推荐阅读