Question

我试图通过按图像组件在不同的屏幕之间导航。每个不同的图像导致一个不同的屏幕。

我首先尝试通过单击“ meo.sudoeste.png”到“ meo_sw”进行导航。但是，每当我按下图像时，都不会发生任何事情。这是我的HomeScreen.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.
});
Could you please help me?

这是我的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'
           }       
      )
   )

更新

这是我的meo_sw.js：

import * as React from 'react'
import { View, Text, ScrollView, TouchableOpacity, StyleSheet } from 'react-native';

export default function Meo() {
  return (
<ScrollView>
  <View style={styles.header}>
    <Text style={styles.texto}>Meo Sudoeste</Text>
  </View>
</ScrollView>
 );
};

 const styles = StyleSheet.create({
header:{
    width:'100%',
    height:90,
    paddingTop:36,
    backgroundColor: 'blue',
    alignItems: 'center',
    justifyContent: 'center'
},
texto:{
    color:'white',
    fontSize: 18 
}
});

Answer 1

似乎您正在尝试导航到meo_sw，该地址未在堆栈导航器中注册。您是否要尝试按以下方式更新代码：

import meo_sw from "./meo_sw"

const AppContainer = createStackNavigator(
{
  meo_sw: meo_sw,
  default: 
  ... // Your existing code.
}

这应该将其注册为您可以navigate登录的屏幕。

Answer 2

为HomeScreen创建单独的StackNavigator并将您的meo_sw插入其中

const HomeStack = createStackNavigator({
  Home: { screen: HomeScreen },
  meo_sw : { screen: meo_sw },
});

然后将您的TabNavigator更改为处理HomeStack

Home: {
    screen: HomeStack,
        navigationOptions: {
        tabBarIcon: ({ tintColor }) => <Ionicons name='ios-home' size={30} color={tintColor}></Ionicons>
    }

检查A stack navigator for each tab以获得更多信息，或检查复杂Navigation example with react navigation。

希望这对您有所帮助。放心怀疑。

Answer 3

这是一个非常小的示例，您可以据此进行自定义。

https://snack.expo.io/@raajnadar/navigate-on-press-of-image-inside-stack

最终路线配置

import React from 'react';

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

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';

import { Ionicons } from '@expo/vector-icons';

import MeoSw from './MeoSw';

function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Home Screen</Text>
      <TouchableWithoutFeedback onPress={() => navigation.navigate('MeoSw')}>
        <Image
          source={require('./assets/snack-icon.png')}
          style={{
            width: 200,
            height: 200,
            marginTop: 40,
            alignSelf: 'center',
          }}
        />
      </TouchableWithoutFeedback>
    </View>
  );
}

function ChatScreen() {
  return (
    <View>
      <Text>Chat Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator({
  MeoSw: MeoSw
})

const AppContainer = createBottomTabNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          <Ionicons name="ios-home" size={30} color={tintColor} />
        ),
      },
    },
    Chat: {
      screen: ChatScreen,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          <Ionicons name="ios-chatboxes" size={30} color={tintColor}>
            {' '}
          </Ionicons>
        ),
      },
    },
    Stack: Stack
  },
  {
    defaultNavigationOptions: {
      tabBarOnPress: ({ navigation, defaultHandler }) => {
        if (navigation.state.key === 'Post') {
          navigation.navigate('postModal');
        } else {
          defaultHandler();
        }
      },
    },
    tabBarOptions: {
      activeTintColor: '#FFA200',
      inactiveTintColor: '#B8B8C4',
      showLabel: false,
    },
  }
);

export default createAppContainer(AppContainer);

按下图像浏览屏幕

3 个答案: