Как я могу показать новый экран после нажатия кнопки в компоненте в реагировать родной?

Question

У меня есть созданный компонент Карусель Spla sh, и на последнем его просмотре / странице у меня есть TextInput и button.On Нажмите, я хочу, чтобы эта кнопка открыла новый экран с BottomNav компонент, где я могу делать другие вещи. Я просто хочу этот Spla sh в качестве целевой страницы. Но когда я запускаю этот код, Spla sh и BottomNav монтируются на одном экране. Мои приложения. js:

    export class App extends Component {
      render() {
        return (
          <PaperProvider>
              <Splash />
              <BottomNav />
          </PaperProvider>
        )
      }
    }

    export default App

Spla sh. js:

  render() {
    return (
      <View style={styles.container} onLayout={this._onLayoutDidChange} >
        <Carousel
          style={this.state.size}
          currentPage={0}
          autoplay
          isLooped={false}
          bulletStyle={{borderColor:'#02101a'}}
          bullets
          chosenBulletStyle={{backgroundColor:'#02101a'}}
        >
          <View style={[styles.container, this.state.size]}>
                <Text style={styles.title}>
                  Sanitize Your Hands Properly
                </Text>
                <Animated.View>
                  <Image source={require('../src/sanitizehand.png')} style={styles.img}/>
                </Animated.View>
                <Text  style={styles.subtitle}>
                  Use an alcohol-based hand sanitizer that contains at least 60% alcohol to disinfect your hand at regular basis.
                </Text>
          </View>
          <View style={[styles.container, this.state.size]}>
                <Text style={styles.title}>
                  Practice Social Distancing 
                </Text>
                <Animated.View>
                  <Image source={require('../src/socialdistancing.png')} style={styles.img}/>
                </Animated.View>
                <Text style={styles.subtitle}>
                  Practice social distancing and maintain space between yourself and others to prevent infection and its spread.
                </Text>
          </View>
          <View style={[styles.container, this.state.size]}>
                <TextInput
                    label='Phone No.'
                    value={this.state.text}
                    placeholder='Enter here'
                    onChangeText={text => this.setState({ text })}
                    style={styles.textinput}
                />
                <Button mode="contained" onPress={() => console.warn('Press')} icon='arrow-right'>
                  Register
                </Button>
          </View>
        </Carousel>
      </View>
    );
  }

BottomNav. js:

  render() {
    return (
      <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={Home} />
        <Tab.Screen name="Feeds" component={Feeds} />
        <Tab.Screen name="Global" component={Global} />
        <Tab.Screen name="FAQ" component={Faq} />

      </Tab.Navigator>
    </NavigationContainer>
    )
  }
}