React Native:文本字符串必须在 <Text> 组件内呈现。在 Android 上使用 expo-checkbox

问题描述 投票:0回答:0

我正在尝试创建一个简单的待办事项列表应用程序。一切都在网络上运行,但在 Android 上我收到标题中写的错误。

当我注释掉 CheckBox 内的 value 和 onValueChange 时,没有任何问题,但包含该代码会导致崩溃。

我查找了其他地方提到的一些问题,例如空白和条件渲染,但据我所知,这些问题都不适用。

这是我的代码:

import { StyleSheet, View, TextInput } from 'react-native';
import { useState } from 'react';
import CheckBox from 'expo-checkbox';

const Task = props => {
    let data = props.data;
    //console.log(data.created, data.done, data.text, data.focus);
    const [valueDisplayed, onChangeText] = useState(data.text);
    return (
        <View style={styles.task}>
            <CheckBox
                value={data.done}
                onValueChange={(value)=>{props.finish(data.created)}}
            />
            <TextInput
                value={valueDisplayed}
                onChangeText={input => {
                    onChangeText(input);
                    props.update(data.created, input);
                }}
                style={styles.textBox}
                onKeyPress={keyPress => {
                    console.log(keyPress.nativeEvent.key);
                    if (keyPress.nativeEvent.key == "Enter") {
                        props.add(data.created);
                    } else if (data.text.length == 0 && 
                        keyPress.nativeEvent.key == "Backspace") {
                        props.delete(data.created);
                    }
                }}
                onSubmitEditing={() => {
                    props.add(data.created);
                }}
                autoFocus={data.focus}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    task: {
        flexDirection: "row",
    },
    textBox: {
        flex: 1,
        fontSize: 32,
    }
});

export default Task;

感谢您的帮助:)

...根据要求,这是父组件的摘录:

const finishItem = async (list, created, setTasks) => {
    let array = await loadList(list);
    for (let i = 0; i < array.length; i++)
        if (array[i].created == created)
            if (array[i].done == 0)
                array[i].done = Date.now();
            else
                array[i].done = 0;
    sortTasks(array);
    setTasks(array);
    await saveList(list, array);
}

const TaskList = (props) => {
    const [tasks, setTasks] = useState([]);
    useEffect(()=>{
        getInitialList(props.list, setTasks);
    }, []);
    return (
        <FlatList
            data={tasks}
            extraData={tasks}
            renderItem={({item}) => (
                <Task
                    data={item}
                    add={(createdFrom) => {
                        addItem(props.list, createdFrom, setTasks);
                    }}
                    update={(created, text) => {
                        updateItem(props.list, created, text, setTasks);
                    }}
                    delete={(created) => {
                        deleteItem(props.list, created, setTasks);
                    }}
                    finish={(created) => {
                        finishItem(props.list, created, setTasks);
                    }}
                />
            )}
            keyExtractor={(item) => {
                return item.created
            }}
            showsHorizontalScrollIndicator={false}
        />
    );
}

记录数据的属性给出:

1690929274428 0 'f' false

react-native android-checkbox
© www.soinside.com 2019 - 2024. All rights reserved.