Как я могу создать осязаемую непрозрачность при нажатии на другую осязаемую область и присвоить тексту в ней значение, введенное при вводе текста

#javascript #react-native

#javascript #react-native

Вопрос:

Я 13-летний новичок в react native, и мне нужна помощь с проблемой в названии.

Мне нужно сделать все это при нажатии на осязаемую непрозрачность. Я пытался искать другие решения в Google, но ничего не нашел.

На самом деле это учебное пособие по Youtube .

Вот ссылка: Учебное пособие

Пожалуйста, помогите мне.

Спасибо.

 import React, { useState } from 'react';
import { StyleSheet, Text, View, FlatList, TextInput, TouchableOpacity } from 'react-native';
import Header from './components/header';
import TodoItem from './components/todoItem';

export default function App() {
  const [todos, setTodos] = useState([
    { text: 'turn on laptop', key: '1'},
    { text: 'create an app', key: '2'},
    { text: 'play on the switch', key: '3'}
  ]);

  const addToDo = () => {
    
  }

const PressHandler = (key) => {
    setTodos((prevTodos) => {
      return prevTodos.filter(todo => todo.key != key);
    });
}


  return (
    <View style={styles.container}>
      <Header />
      <View style={styles.content}>
        {/* todo form */}
        <View style={styles.list}>
          <FlatList 
            data={todos}
            renderItem={({ item }) => (
              <TodoItem item={item} PressHandler={PressHandler}/>
            )}
          />
        </View>
      </View>
        <TextInput style={styles.todoInput} maxLength={20} onChange={() => this.setState} />
        <TouchableOpacity style={styles.submitTodo} onPress={addToDo}>
          <Text style={styles.submitTodoText}>Done</Text>
        </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1, 
    backgroundColor: "#fff",
  },
  content: {
    padding: 40,
  },
  todoInput: {
    position: "absolute",
    bottom: 1, 
  },
  todoInput: {
    height: 31,
    borderColor: "coral",
    borderStyle: "dashed",
    borderWidth: 1,
    borderRadius: 10,
    position: "absolute",
    bottom: 26,
    width: "73%",
    textAlign: "center",
    marginLeft: 25,
  },
  submitTodo: {
    padding: 10,
    width: "15%",
    position: "absolute",
    right: 15,
    bottom: 26,
    backgroundColor: "coral",
    borderRadius: 10,
    alignItems: "center",
  },
  submitTodoText: {
    color: "#fff",
    fontSize: 10,
  }
});

  

Еще раз спасибо, что потратили на это время.

Комментарии:

1. Пожалуйста, добавьте минимальный фрагмент кода