當包裹在某些 View 標簽 React Native 中時，Touchable 不起作用

Question

大家好，我正在嘗試創建一個待辦事項列表應用程序，我想將 TouchableOpacity 用於任務狀態，當用戶按下它時，任務狀態將發生變化。 但由於某種原因，Touchable 標簽不起作用。 我認為這是因為對 Home.JS 的看法。 誰能幫我解決這個錯誤？

這是我的代碼

主頁.js：

        <View>
            <View>
                {taskItems.length > 0 ? (taskItems.map((item, index) => {
                       return (
                            <TouchableOpacity style={styles.taskWrapper} key={index} onPress={() => completeTask(index)}>
                                <Task text={item} /> 
                            </TouchableOpacity>
                       )
                    })) :

                    (
                        <View style={styles.noItemWrapper}>
                            <Text style={styles.noItem1}>There are no task</Text>
                            <Text style={styles.noItem2}>Make your first reminder</Text>
                        </View>
                    )
                }
            </View>

            <KeyboardAvoidingView 
                behavior={Platform.OS === "Android" ? "padding" : "height"}
                style = {styles.writeTaskContainer}
            >
                <TextInput
                    style={styles.input}
                    placeholder={'Write your task'} value={task} onChangeText={text => setTask(text)}/>

                <TouchableOpacity onPress={() => handleAddTask() }>
                    <View style={styles.ButtonWrapper}>
                        <Text style={styles.addText}>+</Text>
                    </View>
                </TouchableOpacity>

            </KeyboardAvoidingView>
        </View>
    )
}

Task.js 代碼：

const Task = (props) => { 
  const[pressed, setPressed] = useState(false);
  const onPressHandler = () =>{
    setPressed(!pressed);
  };

    return (
        <View style={styles.wrapper}>
          <Text style={styles.taskList}>{props.text}</Text>
          <TouchableOpacity style={{ ...{backgroundColor: pressed ? 'green' : '#ff3126'}, ...styles.taskStatus }} onPress={() => onPressHandler()}>
        {pressed ?
            <Text style={styles.statusText} onPress={() => onPressHandler()}>Done</Text>
            :
            <Text style={styles.statusText} onPress={() => onPressHandler()}>On Going</Text>
        }
        </TouchableOpacity>
        </View>
    )
}

Answer 1

嘗試從這里導入 TouchableOpacity：

import {TouchableOpacity} from 'react-native-gesture-handler';

有時 TouchableOpacity 不適用於 position: 'absolute'。