Question

我有一个3 textinput的视图，我试图在键盘打开时将它们居中。我已经尝试了KeyboardAvoidingView，结果是除了保存按钮之外的所有内容都消失了。我做错了什么？

import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
TextInput,
ScrollView,
ListView,
KeyboardAvoidingView,
TouchableOpacity,
AsyncStorage,
    } from 'react-native';

import Note from './Note.js';

export default class NoteBody extends Component {
        static navigationOptions = {
        header: null,
    };

    constructor(props){
         super(props);
        this.state = {
            noteText: '',
            noteTitle: '',
            callType: '',
        };
    }

    render() {

        return (
            <View style={styles.container}>
                <View style={styles.header1}>
                    <Text style={styles.title}>New Note</Text>
                </View>
                <View style={styles.headerDesign}>
                </View>
                <View style={styles.header2}>
                </View>
                <View style= {styles.mainPage}>
                    <View style={styles.noteBody}>
                        <TextInput
                         style = {styles.subject} 
                         placeholder='Raport Number/Note Indentifier'
                         onChangeText={(noteTitle)=> this.setState({noteTitle})} 
                         value={this.state.noteTitle}
                         placeholderTextColor='grey'
                         underlineColorAndroid='transparent'>
                         </TextInput>
                         <TextInput
                         style = {styles.calltype} 
                         multiline = {true}
                         numberOfLines = {5}
                         placeholder='Call Type/Other Information'
                         onChangeText={(callType)=> this.setState({callType})} 
                         value={this.state.callType}
                         placeholderTextColor='grey'
                         underlineColorAndroid='transparent'>
                         </TextInput>
                        <TextInput 
                            multiline = {true}
                            numberOfLines = {8}
                            style={styles.textInput}
                            placeholder='Notes'
                            onChangeText={(noteText)=> this.setState({noteText})}
                            value={this.state.noteText}
                            placeholderTextColor='grey'
                            underlineColorAndroid='transparent'>
                        </TextInput>
                    </View>
                    <View style= {styles.footer}>
                            <TouchableOpacity onPress={ this.addNote.bind(this) } style={styles.addButton}>
                                <Text style={styles.addButtonText}>SAVE</Text>
                            </TouchableOpacity>
                    </View>
                </View>

            </View>
        );
    }

    addNote(){
        const { navigate } = this.props.navigation;
        if(this.state.noteText && this.state.noteTitle && this.state.callType){
            var d = new Date();
            this.props.navigation.state.params.noteArray.push({
                'noteName':this.state.noteTitle,
                'date':(d.getMonth()+1)+
                "/"+d.getDate() +
                "/"+ d.getFullYear(),
                'callType': this.state.callType,
                'note': this.state.noteText
            });

            this.setState({ noteArray: this.props.navigation.state.params.noteArray });
            this.setState({noteText:''});
            this.setState({noteTitle:''});
            this.setState({callType:''});
            AsyncStorage.setItem('arr', JSON.stringify(this.props.navigation.state.params.noteArray));
            this.props.navigation.state.params.onNavigateBack();
            this.props.navigation.goBack();
        }
    }
}


const styles = StyleSheet.create({
container: {
    flex: 1,
},
mainPage:{
    flex: 2,
    alignItems: 'center',
    justifyContent:'center',
},
header1:{
    backgroundColor: '#000',
    alignItems: 'center',
    height: 40,
    justifyContent: 'center',
},
title:{
    color: '#fff',
    fontSize: 20,
},
header2:{
    marginBottom: 10,
    backgroundColor: '#000',
    alignItems: 'center',
    height: 40,
    justifyContent: 'center',
},
headerDesign:{
    backgroundColor: '#0000FF',
    alignItems: 'center',
    height: 20,
    justifyContent: 'center',
},
noteBody:{
    flex: 2,
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    zIndex: 10,
    alignItems: 'center',
    marginBottom: 100,

},
textInput: {
    alignSelf: 'stretch',
    textAlignVertical: 'top',
    backgroundColor: '#fff',
    color: '#000',
    padding: 20,
    borderTopWidth:1,
    borderTopColor: '#D3D3D3',
    borderBottomWidth:1,
    borderBottomColor: '#000',
},
addButton: {
    position: 'absolute',
    zIndex: 11,
    bottom: 20,
    alignItems: 'center',
    justifyContent: 'center',
    width: 200,
    backgroundColor: '#0000FF',
    height: 40,
    elevation: 8
},
addButtonText: {
    color: '#fff',
    fontSize: 20,
},
subject:{
    alignSelf: 'stretch',
    textAlignVertical: 'top',
    backgroundColor: '#fff',
    padding: 20,
    borderTopWidth:1,
    borderTopColor: '#000',
    borderBottomWidth:1,
    borderBottomColor: '#D3D3D3',
},
calltype:{
    alignSelf: 'stretch',
    textAlignVertical: 'top',
    backgroundColor: '#fff',
    padding: 20,
},
footer:{
    flex: 3,
    alignItems: 'center',
    justifyContent:'center',
}

});

请复制文本编辑器中的代码并试一试。只需用KeyboardAvoidingView替换包装视图，如下所示：https://facebook.github.io/react-native/docs/keyboardavoidingview.html#keyboardverticaloffset并告诉我还能做些什么？

Answer 1

您必须将[textContent]插入KeyboardAvoidingView。

像这样：

ScrollView

如何在React Native中打开键盘时使TextInput居中

1 个答案: