Question

在我的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模拟器上运行。

Answer 1

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

React Native无法单击TouchableOpacity或TextInput

1 个答案: