React-Navigation:屏幕之间的导航 [英] React-Navigation: Navigation Between Screens
本文介绍了React-Navigation:屏幕之间的导航的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图通过按图像组件在不同屏幕之间导航.每个不同的图像导致不同的屏幕.
I am trying to navigate between different screens by pressing image components. Each different image leads to a different screen.
我首先尝试通过单击meo.sudoeste.png"到meo_sw"进行导航.但是，每当我按下图像时，什么也没有发生.这是我的 SearchScreen.js:
I am firstly trying to navigate by clicking 'meo.sudoeste.png' to 'meo_sw'.
However whenever I press the image nothing happens.
This is my 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:
This is my 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'
}
)
)
推荐答案
为了导航到另一个屏幕，该屏幕必须包含在 AppContainer 中.
In order to navigate to another screen that screen must be included in AppContainer.
如果你想使用 this.props.navigation.navigate('meo_sw') 导航到 meo_sw 屏幕，创建一个名为 meo_sw 的新屏幕代码> &将其放在 AppContainer 中.
If you want to navigate to meo_sw screen using this.props.navigation.navigate('meo_sw'), Create a new screen called meo_sw & place that inside the AppContainer.
希望对你有帮助.如有疑问，请随意.
Hope this helps you. Feel free for doubts.
这篇关于React-Navigation:屏幕之间的导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
