Как сделать React родной маршрут

Question

Так что я новичок ie в React Native, поэтому я начал изучать курс удеми. Курс немного староват, поэтому я не уверен, что код устарел, но дело в том, что я пытался научиться выполнять маршрутизацию, чтобы изменить экран в простом приложении, но когда я нажимаю кнопку, ничего не происходит. Приложение. js:

    import React from 'react';
import { StyleSheet, Text, View, Platform, Image, ImageBackground } from 'react-native';
import {Button} from 'native-base';
import { render } from 'react-dom';
import Landing from './src/Landing';
import Search from './src/search';

var myBackground = require('./assets/icons/landing.jpg');

export default class App extends React.Component {
  state = {
    currentScreen: "landing"
  }
  switchScreen = (currentScreen) => {
    this.setState({currentScreen});
  }
  renderScreen = () =>{
    if(this.state.currentScreen === "landing") {
      return (
        <Landing switchScreen={this.switchScreen }/>
      )
    }
    else if(this.state.currentScreen === "search") {
      return(
        <Search/>
      )
    }
  }
  render() {
  return (
    <View style={styles.container}>
      {this.renderScreen()}
    </View>
  );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Platform.OS === "android" ? 50 : 0
  },
});

Компонент посадки:

import React from 'react';
import {View, Text, Image, StyleSheet, ImageBackground} from 'react-native';
import {Button} from 'native-base';

var myBackground = require('../assets/icons/landing.jpg');

class Landing extends React.Component {
    render() {
        return(
            <View>
                <ImageBackground style={ styles.imgBackground } source={myBackground}>
                    <View style={styles.viewStyle}>
                    <Text style={styles.titleStyle}>Welcome to PokeSearch</Text>
                    <Button block={true} style={styles.buttonStyle} onPress={()=>this.props.switchScreen("screen")}>
                        <Text style={styles.buttonText}>Start Searching for Pokemon!</Text>
                    </Button>
                    </View>
                </ImageBackground>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      marginTop: Platform.OS === "android" ? 50 : 0
    },
    imgBackground: {
      width: '100%',
      height: '100%',
      flex: 1 
  },
  viewStyle: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: "center",
    alignItems: "center",
    marginTop: 50,
  },
  titleStyle: {
    fontSize: 30,
    color: 'red',
    alignItems: 'center',
  },
  buttonStyle: {
    margin: 10
  },
  buttonText: {
    color: 'red'
  },
  });


export default Landing;

И поиск, который очень прост:

import React from 'react';
import {View,Text} from 'react-native';

class Search extends React.Component {
    render() {
        return (
            <View>
                <Text>Search</Text>
            </View>
        )
    }
}

export default Search;

Поэтому, когда я нажимаю Кнопка должна перейти на страницу поиска, но ничего не происходит. Также я заметил, что кнопка не выполняет анимацию fla sh, которая должна быть при нажатии. Кто-нибудь есть какие-либо предложения о том, как заставить это работать, пожалуйста, и спасибо заранее!

Answer 1

Вы можете построить навигацию, перейдя по этой ссылке.

https://reactnavigation.org/docs/en/getting-started.html

Типичная реализация навигации здесь.

https://github.com/apiko-dev/Perfi/tree/master/app/navigation