在React Native中键盘不与KeyboardAvoidingView一起显示

时间:2019-08-06 09:00:21

标签: javascript reactjs react-native expo

我想知道如何在React Native中使用键盘。

当我单击输入(在“发送”上)时,没有键盘显示。

enter image description here

我尝试使用“ KeyboardAvoidingView”,但键盘没有显示。

  

ChatScreen.js

import React from 'react';
import { ScrollView, KeyboardAvoidingView, StyleSheet, Text, View } from 'react-native';
import MessageList from './MessageList';
import MessageForm from './MessageForm';

export default class ChatScreen extends React.Component {
    render() {
        return (
            <KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
                <MessageList />
                <MessageForm />
            </KeyboardAvoidingView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        display: 'flex',
        flexDirection: 'column',
        flexGrow: 1,
        backgroundColor: 'grey',
        alignSelf: 'stretch',
    },
});
  

MessageForm.js

import React from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';
import MessageFormStyles from './MessageFormStyles'

export default class MessageForm extends React.Component {
    render() {
        return (
            <View style={MessageFormStyles.container}>
                <TextInput
                    style={MessageFormStyles.input}
                    placeholder="Send">

                </TextInput>
            </View>
        );
    }
}
  

Package.json

"dependencies": {
    "axios": "0.19.0",
    "expo": "31.0.2",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation": "3.11.1",
    "react-redux": "6.0.1",
    "redux": "4.0.4",
    "redux-devtools-extension": "2.13.8",
    "redux-immutable-state-invariant": "^2.1.0",
    "redux-thunk": "^2.3.0"
  },

您知道为什么我看不到键盘吗?

1 个答案:

答案 0 :(得分:1)

如果您使用的是模拟器,则必须在模拟器的硬件设置中禁用键盘。

请转到并切换键盘,您可能会再次看到键盘