react-native - React Native:导航服务的导航问题,无法在按下时导航
问题描述
我一直在遵循https://reactnavigation.org/docs/3.x/navigating-without-navigation-prop/上的指南。但是,当我根据给定的代码片段创建导航服务并尝试在我的导航器组件中设置顶级导航器时,它不会导航到所需的屏幕。从主屏幕单击品牌徽标时,我想导航到brandscreen.js(希望实现按品牌购买)但无法导航。
应用程序.js
import React, { Component } from 'react';
import { View, Text, StyleSheet,Image} from 'react-native';
import { DrawerItems,
createStackNavigator,
createDrawerNavigator,
createAppContainer,
createSwitchNavigator,
createBottomTabNavigator} from 'react-navigation'
import HomeScreen from './app/screen/HomeScreen';
import ProfileScreen from './app/screen/ProfileScreen';
import Orders from './app/screen/Orders';
import Notification from './app/screen/Notification';
import Logout from './app/screen/Logout';
import EditProfile from './app/screen/EditProfile'
import {Box} from 'react-native-design-utility'
import Address from './app/screen/Address'
import { Container,Header,Content, Body, Icon,Button} from 'native-base';
import BrandScreen from './app/screen/BrandScreen';
import NavigationService from './app/services/NavigationService'
const profileheader={
headerStyle:{
backgroundColor: '#3a455c',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}
class WelcomeScreen extends Component {
render() {
return (
<Box f={1} center>
<Button block light style={styles.btn} onPress={()=>this.props.navigation.navigate('Dashboard')}>
<Text style={{fontSize:16,color:'white',fontWeight:'bold'}}>Login</Text>
</Button>
<Button block light style={styles.btn} onPress={()=>this.props.navigation.navigate('Welcome')}>
<Text style={{fontSize:16,color:'white',fontWeight:'bold'}}>Sign Up</Text>
</Button>
</Box>
);
}
}
const ProfileStack=createStackNavigator({
Profile:{
screen:ProfileScreen,
navigationOptions:({navigation})=>{
return {
headerLeft:<Icon name="md-menu" style={{color:'white',marginLeft:10}} onPress={()=>navigation.toggleDrawer()}/>,
headerStyle:{
backgroundColor: '#3a455c',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}
}
},
EditProfile:{
screen:EditProfile,
navigationOptions:{...profileheader},
}
})
const ProfiletTabNavigator=createBottomTabNavigator({
Profile:{
screen:ProfileStack,
navigationOptions: {
tabBarLabel: 'Profile',
tabBarIcon: () =><Icon name="md-person" size={25} style={{fontSize: 20,paddingTop:5}}/>
}
},
Address:{
screen:Address,
navigationOptions: {
tabBarLabel: 'Saved Address',
tabBarIcon: () =><Icon name="md-bookmark" size={25} style={{fontSize: 20,paddingTop:5}}/>
}
},
},{
navigationOptions:({navigation})=>{
const {routeName}=navigation.state.routes[navigation.state.index]
return {
headerTitle: routeName,
header:null,
headerStyle: {
backgroundColor: '#3a455c',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}
}
})
const ProfileStackNavigator=createStackNavigator({
ProfiletTabNavigator:{
screen:ProfiletTabNavigator,
}
},{
defaultNavigationOptions:({navigation})=>{
return {
headerLeft:<Icon name="md-menu" style={{color:'white',marginLeft:10}} onPress={()=>navigation.toggleDrawer()}/>
}
}
});
const CustomDrawerContentComponent=(props)=>(
<Container>
<Header style={{height:130,backgroundColor:'#3a455c',marginTop:0}}>
<Body>
<Image name='person' style={styles.dImage}
source={require('./app/img/profile-image.jpg')}/>
</Body>
</Header>
<Content>
<DrawerItems {...props}/>
</Content>
</Container>
)
const HomeStack=createStackNavigator({
Home:{
screen:HomeScreen,
navigationOptions: {
header:null,
tabBarLabel: 'Home',
tabBarIcon: () => <Icon name="md-home" size={25} style={{fontSize: 20,paddingTop:5}}/>
},
Brand:BrandScreen
}
})
const AppDrawerNavigator=createDrawerNavigator ({
Home:{
screen:HomeStack,
navigationOptions: {
drawerLabel: 'Home',
drawerIcon: () =><Icon name="md-home" size={25} style={{fontSize: 20,paddingTop:5}}/>
}
},
Profile:{
screen:ProfileStackNavigator,
navigationOptions: {
drawerLabel: 'My Account',
drawerIcon: () =><Icon name="md-person" size={25} style={{fontSize: 20,paddingTop:5}}/>
}
},
Orders:Orders,
Notification:Notification,
Logout:Logout,
},{
initialRouteName:'Home',
contentComponent:CustomDrawerContentComponent,
})
const AppSwitchNavigator=createSwitchNavigator({
Welcome:WelcomeScreen,
Dashboard:AppDrawerNavigator,
})
const AppNavigator=createAppContainer(AppSwitchNavigator);
export default class App extends Component {
render() {
return (
<AppNavigator ref={r => NavigationService.setTopLevelNavigator(r)} />
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#2c3e50',
},
dImage:{
height:100,
width:100,
borderRadius:50,
},
btn:{
padding:10,
margin:10,
backgroundColor:'#273746',
borderRadius:4
}
});
导航服务.js
let _navigator;
function setTopLevelNavigator( navigatorRef ){
_navigator = navigatorRef;
}
function navigate( routeName, params ){
_navigator.dispatch(
NavigationActions.navigate({
routeName,
params
})
);
}
export default {
navigate,
setTopLevelNavigator,
};
BrandCard.js
//import liraries
import React, { Component } from 'react';
import {Image,TouchableOpacity,StyleSheet} from 'react-native'
import {Box,Text} from 'react-native-design-utility'
import NavigationService from '../services/NavigationService';
class BrandCard extends Component {
state={};
handlepress =()=>{
NavigationService.navigate('Brand',{ name: this.props.title});
};
render() {
const {title,image}=this.props;
return(
<TouchableOpacity onPress={this.handlepress} style={{flex:1}}>
<Box center f={1}>
<Box>
<Image source={image} style={{height:100,weight:100,resizeMode:'contain'}}
/>
</Box>
</Box>
</TouchableOpacity>
)
}
}
export default BrandCard;
解决方案
您做错的唯一一件事是您使用的路线名称“品牌”未在您的路线中声明。
NavigationService.navigate('Brand',{ name: this.props.title});
在这里用您正确的路线名称替换“品牌”。
希望这可以帮助!
推荐阅读
- vba - 分配给一个对象导致另一个对象也发生变化
- vue.js - 无法读取本地主机上未定义的属性“获取”
- perl - Perl 哈希在访问它的未定义值时被错误地初始化
- javascript - 如何CSS网格最后大小
- python - 如何按不同的值对一个 Pandas 数据框列的元素进行切片?
- single-sign-on - 得到“弹性没有正确加载。检查服务器输出以获取更多信息。” 通过网守访问时
- java - 将汽车绘制为多边形并使其在 Java Swing 中移动
- xaml - 如何更改工具栏颜色?(xamarin.forms)
- windows - 在 windows cmd 中为 conf 文件指定环境变量
- spring-boot - SpringBoot Config Server 文件分隔符问题