Javascript 通过按下按钮进行屏幕切换

我刚开始学英语。在这个应用程序中，我在标题中有两个按钮，第一个是“Todo”，第二个是“Tags”。我想通过按这些按钮来改变内容。我想我需要改变状态。我的意思是，当我点击按钮标签时，下面我得到了标签屏幕组件，与按钮Todo完全相同。如何连接这些组件以使其正常工作

app.js

import React, { useState } from 'react'
import { StyleSheet,  View, FlatList } from 'react-native'
import { Navbar } from './src/Navbar'
import { TagScreen } from './src/screens/TagScreen'
import { TodoScreen } from './src/screens/TodoScreen'



export default function App() {
  const [todos, setTodos] = useState([])
  const [tags, setTags] = useState([])
  const [appId, setAppId] = useState([])

  const addTodo = title => {
    setTodos(prev => [
      ...prev,
      {
        id: Date.now().toString(),
        title
      }
    ])
  }

  const addTags = title => {
    setTags(prev => [
      ...prev,
      {
        id: Date.now().toString(),
        title
      }
    ])
  }

  const removeTags = id => {
    setTags(prev => prev.filter(tag => tag.id !== id))
  }
  const removeTodo = id => {
    setTodos(prev => prev.filter(todo => todo.id !== id))
  }

  return (
    <View>
      <Navbar title='Todo App!' />
      <View style={styles.container}>
        <TagScreen addTags={addTags} tags={tags} removeTags={removeTags}/>
        {/* <TodoScreen todos={todos} addTodo={addTodo} removeTodo={removeTodo} /> */}
        {/* HERE MUST CHANGED COMPONENTS */}
        </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 30,
    paddingVertical: 20
  }
})

import React，{useState}来自“React”
从“react native”导入{样式表、视图、平面列表}
从“./src/Navbar”导入{Navbar}
从“./src/screens/TagScreen”导入{TagScreen}
从“./src/screens/TodoScreen”导入{TodoScreen}
导出默认函数App（）{
const[todos，setTodos]=useState（[]
const[tags，setTags]=useState（[]）
const[appId，setAppId]=useState（[]）
const addTodo=标题=>{
setTodos（上一个=>[
…上一页，
{
id:Date.now（）.toString（），
标题
}
])
}
const addTags=title=>{
setTags（上一个=>[
…上一页，
{
id:Date.now（）.toString（），
标题
}
])
}
const removeTags=id=>{
setTags（prev=>prev.filter（tag=>tag.id！==id））
}
const removeTodo=id=>{
setTodos（prev=>prev.filter（todo=>todo.id！==id））
}
返回(
{/*  */}
{/*此处必须更改组件*/}
)
}
const styles=StyleSheet.create({
容器：{
水平方向：30，
填充垂直：20
}
})

navbar.js

import React from 'react'
import { View, Text, StyleSheet, Button, TouchableOpacity } from 'react-native'

export const Navbar = ({ title }) => {
  return (
    <View style={styles.padding}>
      <View style={styles.navbar}>
        <TouchableOpacity 
        style={styles.button}

        >
          <Text>Todo</Text>  

        </TouchableOpacity>
        <TouchableOpacity 
        style={styles.button}

        >
          <Text>Tags</Text>  
        </TouchableOpacity>
        <Text style={styles.text}>{title}</Text>
      </View>
    </View>
  )
}

从“React”导入React
从“react native”导入{视图、文本、样式表、按钮、TouchableOpacity}
导出常量导航栏=（{title}）=>{
返回(
待办事项
标签
{title}
)
}

您需要跟踪您所在州可见内容的可见性， 在你的应用程序组件中，执行此操作

const [showTodos, setShowTodos] = useState(false);

const makeTodosInvisible= () => setShowTodos(false);
const makeTodosVisible = () => setShowTodos(true);

  return (
    <View>
      <Navbar onTodoPress={makeTodosVisible } onTagPress={makeTodosInvisible} title='Todo App!' />
      <View style={styles.container}>
        {showTodos 
        ? <TodoScreen todos={todos} addTodo={addTodo} removeTodo={removeTodo} />
        :  <TagScreen addTags={addTags} tags={tags} removeTags={removeTags}/>
        }

        {/* <TodoScreen todos={todos} addTodo={addTodo} removeTodo={removeTodo} /> */}
        {/* HERE MUST CHANGED COMPONENTS */}
        </View>
    </View>
  )

---

谢谢你的回答。这是非常有用的评论。新的状态正是我所需要的，它可以工作，但只有当我自己改变状态，输入true或falls，按钮仍然不工作时，可能是我需要应用程序中的新功能，如addTodo。你能帮我吗？你的意思是@Ilyaraevoyi，当我改变状态为true或false时，我看到了变化，但按钮仍然不工作（将其重命名为您想要的名称，我还编辑了我的代码@ILYAKRAEVOYES，我不理解，我可以重命名它，但我做到了，但它不起作用。我使用了您的最终代码，但它也不起作用。我知道逻辑是正确的，但我不知道问题出在哪里

export const Navbar = ({ title, onTodoPress, onTagPress}) => {
  return (
    <View style={styles.padding}>
      <View style={styles.navbar}>
        <TouchableOpacity 
        style={styles.button}
         onPreesed={onTodoPress} // will hide Tags and show Todos
        >
          <Text>Todo</Text>  

        </TouchableOpacity>
        <TouchableOpacity 
        style={styles.button}
   onPreesed={onTagPress} // will show Tags and hide Todos
        >
          <Text>Tags</Text>  
        </TouchableOpacity>
        <Text style={styles.text}>{title}</Text>
      </View>
    </View>
  )
}