键盘上方的文本框

Question

我是 React Native 的新手，我遇到了一个问题：当我在其中书写时，我的 TextBox 没有停留在键盘上方。

这些是应用程序的视觉效果

Screenshot

这是我的 Signup.js:

import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native';

import Form from '../components/Form';
import Logo2 from'../components/Logo2';

import {Actions} from 'react-native-router-flux';

export default class Signup extends Component {

goBack() {
    Actions.pop()
}

render() {
    return(
        <View style={styles.container}>
    <Logo2/>
            <Form type="Registrar"/>
            <View style={styles.signupTextCont}> 
                <Text style={styles.signupText}>Ja tens uma conta? </Text>
                <TouchableOpacity onPress={this.goBack}><Text style={styles.signupButton}>Entra</Text></TouchableOpacity>
            </View>
        </View>
    )
}
}

const styles = StyleSheet.create({
container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#232122'
},
signupTextCont: {
  flexGrow: 1,
  justifyContent: 'center',
  alignItems: 'flex-end',
  paddingVertical: 16,
  flexDirection: 'row'
},
signupText: {
  color: 'rgba(255,255,255,0.7)', 
  fontSize:16
},
signupButton: {
    color: '#FFA200',
    fontSize:16,
    fontWeight: '500'
}
});

我不知道我需要编码什么。你能帮帮我吗？

Answer 1

您可以使用 KeyboardAvoidingView 而不是普通的 View 包装您的代码，这样它实际上可以将其中的任何项目提升到键盘上方。您可以使用 <KeyboardAvoidingView behavior="padding">

希望对您有所帮助。

Answer 2

复制我解决您问题的评论；您可以使用包 react-native 中的组件 KeyboardAvoidingView。它会提升虚拟键盘上方的区域。

像这样包装你的代码：

<KeyboardAvoidingView behavior={'position'} enabled> 
  <View style={styles.signupTextCont}> 
    <Text style={styles.signupText}>Ja tens uma conta? </Text>
    <TouchableOpacity onPress={this.goBack}>
      <Text style={styles.signupButton}>Entra</Text>
    </TouchableOpacity>
  </View>
</KeyboardAvoidingView>

以下是有关其工作原理的更多信息：https://facebook.github.io/react-native/docs/keyboardavoidingview。

键盘上方的文本框

TextBox above Keyboard

javascript

textbox

textview

react-native