React Native无法单击TouchableOpacity或TextInput

Question

In my React Native project I have a TextInput and a TouchableOpacity component at the top of the screen that for some reason cannot be clicked. It worked at some point while I was working on the project, but for some reason it no longer recognizes clicks or key events. The component is as follows:

 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>
    );
}
}

The style sheet is:

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
      },
});

My best guess is that it the issue would have something to do with the parent View components that the TouchableOpacity and TextInput components are in, but I'm not sure. How can I get those components to recognize clicks and respond to them? I'm running on an iPhone 7 emulator.

Answer 1

You have not defined testSetStorage function in your component. You need to testSetStorage = () => {console.log("Tapped")} outside render function.