Question

我刚刚开始学习React-native。在这个应用程序中，我在标题中有两个按钮，第一个是“ Todo”，第二个是“ Tags”。我想通过按这些按钮来更改内容。我认为我需要更改状态。for clarity我的意思是，当我点击“标签”按钮时，在下面获得TagScreen组件，该按钮与“待办事项”按钮完全相同。如何连接这些组件以使其正常工作？

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 组件中，执行此操作；

[
  { label: "First Name",  type: "text"},
{ label: "Email",  type: "text"},
  ].map((item, i) => (
  <div>
    <TextField
      key={i}
      label={item.label}
      type= {item.type}    
    />
  </div>
)

并在您的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

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

1 个答案: