React-Navigation：屏幕之间的导航

Posted 2023-02-23

【中文标题】React-Navigation：屏幕之间的导航

【英文标题】：React-Navigation: Navigation Between Screens

【发布时间】：2020-02-29 13:35:24

【问题描述】：

我正在尝试通过按图像组件在不同屏幕之间导航。每个不同的图像都通向不同的屏幕。

我首先尝试通过单击“meo.sudoeste.png”到“meo_sw”进行导航。 但是，每当我按下图像时，什么都没有发生。 这是我的SearchScreen.js：

import React from 'react';
import View, Text, StyleSheet, TouchableOpacity, TextInput, ScrollView, Image from 'react-native';
import * as firebase from 'firebase';
import Icon from 'react-native-vector-icons/Ionicons';
import  StackNavigator  from 'react-navigation';

export default class HomeScreen extends React.Component  
constructor(props) 
  super(props);
  this.state =     
    

render()       
    return (
    <View style=styles.screen>
      <View style=styles.container>
        <View>
          <Icon name="ios-search" style=styles.icon/>
        </View>
        <TextInput style=styles.inputBox
                  underlineColorandroid='rgba(0,0,0,0)' 
                  placeholder="Procura aqui"
                  placeholderTextColor = "black"
                  selectionColor="black"
                  keyboardType="default"/>
      </View>
        <ScrollView style=styles.teste> 
          <Text style=styles.festivais>Recomendados</Text>
            <ScrollView horizontal=true showsHorizontalScrollIndicator=false style=styles.festivais_lista>
              <TouchableOpacity onPress=() => this.props.navigation.navigate('meo_sw')>
                <Image source=require('../assets/meo_sudoeste.png') style=styles.image/>
              </TouchableOpacity>
              <TouchableOpacity onPress=() => navigation.navigate('vodaf_coura')>
                <Image source=require('../assets/vodafone_coura.png') style=styles.image />
              </TouchableOpacity>
              <TouchableOpacity onPress=() => navigation.navigate('superR_superB')>
                <Image source=require('../assets/superbock_superrock.png') style=styles.image/>
              </TouchableOpacity>
              <TouchableOpacity onPress=() => navigation.navigate('nos')>
                <Image source=require('../assets/nos_primavera.png') style=styles.image/>
              </TouchableOpacity>
              <TouchableOpacity onPress=() => navigation.navigate('rock_in_rio')>
                <Image source=require('../assets/rock_in_rio.png') style=styles.image/>
              </TouchableOpacity>
              <TouchableOpacity onPress=() => navigation.navigate('edp_cool_jazz')>
                <Image source=require('../assets/edp_cooljazz.png') style=styles.image/>
              </TouchableOpacity>
            </ScrollView>                    
      </ScrollView>
    </View>
  );       

  


const styles = StyleSheet.create(
  // I took this off because it is irrelevant.
);

你能帮帮我吗？

更新

这是我的 App.js：

import React from 'react';
import createAppContainer, createSwitchNavigator from 'react-navigation';
import createStackNavigator from 'react-navigation-stack';
import createBottomTabNavigator from 'react-navigation-tabs'
import Ionicons from '@expo/vector-icons';

import ChatScreen from './screens/ChatScreen';
import PostScreen from './screens/PostScreen';
import NotificationScreen from './screens/NotificationScreen';
import ProfileScreen from './screens/ProfileScreen';
import LoadingScreen from './screens/LoadingScreen';
import LoginScreen from './screens/LoginScreen';
import RegisterScreen from './screens/RegisterScreen';
import HomeScreen from './screens/HomeScreen';
import firebaseConfig from './config';
import * as firebase from 'firebase';

import meo_sw from '../Eventos/Festivais/meo_sw';

   const AppContainer = createStackNavigator(

  default: createBottomTabNavigator(
    
        Home: 
          screen: HomeScreen,
          navigationOptions: 
            tabBarIcon: (tintColor) => <Ionicons name='ios-home' size=30 color=tintColor></Ionicons>
          
        ,
        Chat: 
          screen: ChatScreen,
          navigationOptions: 
            tabBarIcon: (tintColor) => <Ionicons name='ios-chatboxes' size=30 color=tintColor> </Ionicons>
          
        ,
        Home: 
          screen: HomeScreen,
          navigationOptions: 
            tabBarIcon: (tintColor) => <Ionicons name='ios-home' size=30 color=tintColor style=
              shadowColor:'#E9446A', 
              shadowOffset:
               width:0, 
               heigth:0, 
               shadowRadius:10, 
               shadowOpacity:0.3></Ionicons>
          
        ,
        Post: 
          screen: PostScreen,
          navigationOptions: 
            tabBarIcon: (tintColor) => 
            <Ionicons name='ios-add-circle' 
              size=48 color=tintColor>
            </Ionicons>
          
        ,
        Notification: 
          screen: NotificationScreen,
          navigationOptions: 
            tabBarIcon: (tintColor) => <Ionicons name='ios-notifications' size=30 color=tintColor> </Ionicons>
          
        ,
        Profile: 
          screen: ProfileScreen,
          navigationOptions: 
            tabBarIcon: (tintColor) => <Ionicons name='ios-person' size=30 color=tintColor> </Ionicons>
          
        
      ,
      
        defaultNavigationOptions:
          tabBarOnPress: (navigation, defaultHandler) => 
            if (navigation.state.key === 'Post') 
              navigation.navigate('postModal')
             else 
              defaultHandler()
            
          
        ,
        tabBarOptions: 
          activeTintColor: '#FFA200',
          inactiveTintColor: '#B8B8C4',
          showLabel: false
        
      
  ),
  postModal: 
    screen: PostScreen
  
,

  mode: 'modal',
  headerMode:'none'

 )

  const AuthStack= createStackNavigator(
  Login: LoginScreen,
  Register: RegisterScreen
  )

  export default createAppContainer(
  createSwitchNavigator(
      
          Loading: LoadingScreen,
          App: AppContainer,
          Auth: AuthStack
      ,
      
            initialRouteName: 'Loading'
                 
      )
  )

【问题讨论】：

如何配置导航？

【参考方案1】：

为了导航到另一个屏幕，该屏幕必须包含在 AppContainer 中。

如果您想使用this.props.navigation.navigate('meo_sw') 导航到meo_sw 屏幕，请创建一个名为meo_sw 的新屏幕并将其放在AppContainer 中。

希望这对您有所帮助。如有疑问，请随意。

【讨论】：

我已经有了 meo_sw.js 。我现在如何将它添加到 AppContainer 中？我应该把它放在“屏幕：主屏幕”下吗？

因为我希望这个屏幕依赖于 HomeScreen.js。只有通过访问“HomeScreen.js”，我才能访问“meo_sw.js”。

@Tiago2.0 然后您应该导航到 HomeScreen 并将 meo_sw 作为 HomeScreen 中的组件导入。

我应该如何将它添加到 HomeScreen 先生？

我是 React Native 的新手