React Native 无法点击 TouchableOpacity 或 TextInput答案

【问题标题】：React Native can't click TouchableOpacity or TextInputReact Native 无法点击 TouchableOpacity 或 TextInput
【发布时间】：2018-09-11 01:00:57
【问题描述】：

在我的 React Native 项目中，我在屏幕顶部有一个 TextInput 和一个 TouchableOpacity 组件，由于某种原因无法单击它们。它在我处理项目时的某个时候起作用，但由于某种原因，它不再识别点击或关键事件。组件如下：

 import React, { Component } from "react";
import {
AsyncStorage,
Dimensions,
FlatList,
Platform,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View
} from "react-native";
import styles from "./style/styles";
import NotificationBar from "./components/NotificationBar";

export default class App extends Component {
constructor(props) {
    super(props);
    this.data = [];
    this._initData();
}

_initData() {
    for (let i = 0; i < 500; i++) {
        this.data.push({
            // key: i,
            id: "ABC" + i,
            name: "Random Name",
            value: 50 * i
        });
    }
}

_renderItem = ({ item }) => {
    return (
        <View style={styles.itemContainer}>
            <Text style={styles.textItem}>{item.id}</Text>
        </View>
    );
};

render() {
    return (
        <View>
            <NotificationBar />
            <View style={{ flex: 1, flexDirection: "column" }}>
                <View style={{ flex: 1, flexDirection: "row" }}>
                    <View
                        style={{
                            width: (Dimensions.get("window").width / 3) * 2,
                            height: 50,
                            backgroundColor: "white"
                        }}
                    >
                        <TextInput
                            placeholder="New List Name"
                            style={styles.textInputStyle}
                        />
                    </View>
                    <View
                        style={{
                            width: Dimensions.get("window").width / 3,
                            height: 50,
                            backgroundColor: "#4ce31e"
                        }}
                    >
                        <TouchableOpacity
                            style={styles.button}
                            onPress={this.testSetStorage}
                        >
                            <Text> Create List </Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
            <View style={{ paddingTop: 50 }}>
                <FlatList
                    data={this.data}
                    renderItem={this._renderItem}
                    style={{ alignSelf: "stretch" }}
                    keyExtractor={(item, index) => item.id}
                />
            </View>
        </View>
    );
}
}

样式表是：

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
    statusBarBackground: {
        height: 20,
        backgroundColor: 'white',
    },
    textInputStyle: {   
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        textAlign: 'center',
        borderWidth: 1,
        borderRadius: 6,
    },
    button: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        width: 100,
        paddingLeft: 20,

    },
    container: {
        flex: 1,
        justifyContent: 'center',
        paddingHorizontal: 10
      },
});

我最好的猜测是，这个问题与 TouchableOpacity 和 TextInput 组件所在的父 View 组件有关，但我不确定。如何让这些组件识别点击并做出响应？我在 iPhone 7 模拟器上运行。

【问题讨论】：

标签： react-native

【解决方案1】：

您尚未在组件中定义 testSetStorage 函数。你需要testSetStorage = () => {console.log("Tapped")}外部渲染函数。

【讨论】：