React Native 无法点击 TouchableOpacity 或 TextInput

Posted 2023-03-10

【中文标题】React Native 无法点击 TouchableOpacity 或 TextInput

【英文标题】：React Native can't click TouchableOpacity or 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 模拟器上运行。

【参考方案1】：

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