我无法在反应原生平面列表中写入输入

Posted 2023-02-16

【中文标题】我无法在反应原生平面列表中写入输入

【英文标题】：I can't write to input in react native flatlist

【发布时间】：2021-09-29 13:16:24

【问题描述】：

我正在尝试学习 React Native。我有一个示例，但 FlatList 中存在问题。我在页脚组件中有一个 TextInput。没有错误，但是当我尝试写入输入字段时，键盘无法保留。它只是出现然后消失。我该如何解决这个问题？ 这是我的代码：

import React,  useRef, useState  from "react";
import 
    Text,
    View,
    ActivityIndicator,
    Image,
    Button,
    Alert,
    TouchableOpacity,
    TextInput,
    FlatList,
 from "react-native";

function MyHeader() 
    return (
        <View style= marginHorizontal: 40, marginVertical: 60 >
            <Text style= fontWeight: "bold", fontSize: 24, marginBottom: 30 >
                Hello React Native
            </Text>
            <ActivityIndicator
                size="large"
                color="#c1262c"
                style= marginBottom: 30 
            />
        </View>
    );


function MyFooter() 
    const [text, setText] = useState("");

    const inputText = (text) => 
        setText(text);
    ;

    const alertMessage = text;
    return (
        <View>
            <View
                    style=
                    borderWidth: 2,
                    borderColor: "black",
                    padding: 20,
                    marginBottom: 30,
                
            >
                <Text>Hello again!</Text>
            </View>
            <TextInput
                style=
                    borderWidth: 2,
                    borderColor: "black",
                    padding: 20,
                    marginBottom: 30,
                
                value=text
                onChangeText=inputText
            />
            <Button
                onPress=() => Alert.alert(alertMessage)
                title="Learn More"
                color="#c1262"
            />
        </View>
    );


export default function App() 
    const randomNum = useRef(Math.random()).current;

    return (
        <FlatList
            ListHeaderComponent=MyHeader
            data=[0, 1, 2, 3, 4]
            renderItem=( item ) => 
                return (
                    <TouchableOpacity
                        onPress=() => Alert.alert(`You pressed image #$item + 1`)
                    >
                        <Image
                            source=
                                uri: `https://picsum.photos/500/300?random=$randomNum + item`,
                            
                            style= width: "100%", height: 160, marginBottom: 30 
                        />
                    </TouchableOpacity>
                );
            
            keyExtractor=(item) => String(item)
            ListFooterComponent=MyFooter
        />
    );

【问题讨论】：

我似乎无法使用运行 ios 12.4 的 iPhoneX 模拟器复制此问题。我将您上面的代码复制到一个应用程序中，键盘仍然为我打开。可能需要有关您的设置的更多信息。

【参考方案1】：

只需更改或删除 onChangeText=inputText

【讨论】：

我现在试过了，可惜没用。我也尝试使用 inputText 设置警报消息，当我尝试使用 ScrollView 时它正在工作。