无法与 React Native App 上的按钮或文本输入交互

Question

我是 React Native 的新手。我正在尝试按照官方文档 - https://reactnative.dev/docs/intro-react 创建一个 React 输入文本框。

使用 Android ADV。 当我单击输入文本框时，键盘没有打开。 同样，在单击事件中，也没有发生任何事情。 这是代码。

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

export default class Login extends Component {
    state = {
        count: 0
    }

    onPress = () => {
        this.setState({
            count: this.state.count + 1
        })
    }

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity
                    style={styles.button}
                    onPress={this.onPress}
                >
                    <Text>Click me</Text>
                </TouchableOpacity>
                <View>
                    <Text>
                        You clicked {this.state.count} times
                    </Text>
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    button: {
        alignItems: 'center',
        backgroundColor: '#DDDDDD',
        padding: 10,
        marginBottom: 10
    }
})

//Cat.js

import React from 'react';
import { Text, TextInput, View } from 'react-native';

const Cat = () => {
  return (
    <View>
      <Text>Hello, I am...</Text>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1
        }}
        defaultValue="Name me!"
      />
    </View>
  );
}

export default Cat;

这些文本框和按钮出现在屏幕上，但我无法在 AVD 中点击它

Snapshots

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

import Cat from './components/Cat';
import Click from './components/Click';

export default class App extends React.Component {
  render() {
    return( 
      <>
        <Cat /> 
        <Click />
      </>
    );
  }
}

Answer 1

TLDR

我认为是 AVD 软件键盘设置问题

回答

欢迎使用 react-native。 在我看来，它可能是 AVD 问题而不是 react-native 问题

所以，我研究并为您提供了一个很好的参考

参考

Android emulator doesn't take keyboard input - SDK tools rev 20 How can I make the Android emulator show the soft keyboard? 我希望它对你有帮助。谢谢