通过按下按钮反应本机屏幕切换

Question

刚开始学React-native。在此应用程序中，我在 header 中有两个按钮，第一个 'Todo'，第二个 'Tags'。我想通过按下这些按钮来更改内容。我想我需要更改状态。for clarity我的意思是，当我点击按钮标签时，在下面我得到 TagScreen 组件，与按钮 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
  }
})

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>
  )
}

Answer 1

好吧，您需要跟踪您所在州可见内容的可见性，在您的 App 组件中，执行此操作；

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>
  )

并在您的 navbar.js 中执行此操作

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>
  )
}

通过按下按钮反应本机屏幕切换

Screen switching by press on button react native

javascript

switching

reactjs

react-native