Переключение экрана нажатием на кнопку реагирует на родной - PullRequest
Новая
       31

Переключение экрана нажатием на кнопку реагирует на родной

0 голосов
/ 25 февраля 2020

Я только начал изучать React-native. В этом приложении у меня есть две кнопки в заголовке, первая «Todo», вторая «Теги». Я хочу изменить содержимое, нажав на эти кнопки. Я думаю, что мне нужно изменить состояние. для ясности Что я имею в виду, когда я нажимаю на кнопку Теги, ниже я получаю компонент TagScreen, точно такой же для кнопки Todo. Как подключить эти компоненты, чтобы они работали правильно?

приложение. 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>
  )
}

1 Ответ

0 голосов
/ 26 февраля 2020

ну, вам нужно отслеживать видимость того, что видно в вашем состоянии, в вашем приложении компоненте, сделайте это; 

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