KeyboardAvoidingView在React Native中无法与标题视图一起使用

时间:2019-02-13 11:37:31

标签: react-native

我正在制作一个本机应用程序,其中我为导航创建了一个自定义标头。现在当我打开键盘在文本字段中键入内容时,它会缩小标头视图。所以我使用了KeyboardAvoidingView,因此它不会缩小标头视图。这是我的代码。

render() {
        return (


    <View style ={styles.container}>    
        {/*for header*/}
        <KeyboardAvoidingView style = {{ width:'100%',height:'09%',backgroundColor: '#009AFF'}}   keyboardVerticalOffset={70}>
         <View style = {{flexDirection:'row',justifyContent:'space-between',alignItems: 'center'}}>

                    <TouchableWithoutFeedback onPress={() =>this.props.navigation.goBack()}>
                                 <Image style={{width: 25, height: 25,margin:10}}  source={require('../assets/clinic/left-arrow.png')} />
                     </TouchableWithoutFeedback>

                     <View>
                      <Text style={{fontSize: 21,fontWeight: 'bold', color: "white",paddingRight:25}}>Search Job</Text>
                     </View>

                    <View>
                    </View>

         </View>
         </KeyboardAvoidingView>
         {/*for main content*/}

         <View style={{padding:10,width:'90%'}}> 
              <TextField
            style = {{width:'100%'}}
            label='Job Profile'
            value={this.state.profile}
            onChangeText={ (profile) => this.setState({profile}) }
        />
          <TextField
            style = {{width:'100%'}}
            label='Location'
            value={this.state.location}
            onChangeText={ (location) => this.setState({location }) }
        />
          <TextField
            style = {{width:'100%',marginBottom:35}}
            label='Experience'
            value={this.state.experience}
            onChangeText={ (experience) => this.setState({xperience}) }
        />

         <TouchableOpacity
          onPress={() => this.props.navigation.navigate("Location")}
            style={styles.submitButton}>
                    <Text style={styles.submitText}>Search</Text>
        </TouchableOpacity>

         </View>

    </View>

    )
}
}

但是上面的代码不起作用,它缩小了标题视图的高度。为什么?我在这里做错了什么?我是本机开发的新参与者,所以我要弄清楚我的概念

0 个答案:

没有答案