我正在尝试通过按图像组件在不同屏幕之间导航。每个不同的图像导致一个不同的屏幕。
我首先尝试通过单击'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'
}
)
)
UPDATE
这是我的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
}
});
似乎您正在尝试导航到meo_sw
,该代码未在堆栈导航器中注册。您是否要尝试更新代码,如下所示:
import meo_sw from "./meo_sw"
const AppContainer = createStackNavigator(
{
meo_sw: meo_sw,
default:
... // Your existing code.
}
应该将其注册为可以navigate
登录的画面。
为主屏幕创建单独的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。
希望这对您有所帮助。随时提出疑问。
这里是一个非常小的示例,您可以据此进行自定义。
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);