在TabNavigator中使用Navigation報錯undefined is not an object (this.props.navigation.navigate)
阿新 • • 發佈:2019-02-16
在學習react-native時,出現一個愣是想不明白的錯誤,在TabNavigator底部導航選單的子頁面中做跳轉,總會彈出錯誤介面,錯誤大概:
即是這個屬性是不存在的。想想,可能需要在導航選單頁裡傳遞一個名為navigation的引數才行吧,於是在首頁的底部選單每個子頁都加上這個屬性,結果,還真可以了,雖然還不是很懂Navigation路由的深層原理,但是問題終究還是解決了,記錄一下,程式碼如下:
路由配置程式碼:
/** * Created by Administrator on 2017/7/20. */ import {StackNavigator} from 'react-navigation'; import Main from './js/main'; import MySelf from './js/myself'; import List from './js/list'; const NaviApp = StackNavigator({ Main: {screen: Main}, MySelf: {screen: MySelf}, List: {screen: List} },{ initialRouteName: 'Main' }); export default NaviApp;
主頁程式碼:
/** * Created by Administrator on 2017/7/19. */ import React,{Component} from 'react'; import { View, Image, Text, StyleSheet, Dimensions } from 'react-native'; import TabNavigator from 'react-native-tab-navigator'; import MySelf from './myself'; var navigation = null; export default class Main extends Component { constructor(props){ super(props); this.state = { selectedTab: '首頁', }; navigation = this.props.navigation; } render(){ return( <View style={styles.footer}> <TabNavigator> <TabNavigator.Item selected={this.state.selectedTab === '首頁'} title="首頁" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image style={styles.icon} source={require("../imgs/index.png")} />} renderSelectedIcon={() => <Image style={styles.icon} source={require("../imgs/indexselected.png")} />} onPress={() => this.setState({ selectedTab: '首頁' })} > <MySelf navigation={navigation}/> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === '新聞'} title="新聞" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image style={styles.icon} source={require("../imgs/news.png")} />} renderSelectedIcon={() => <Image style={styles.icon} source={require("../imgs/newsselected.png")} />} onPress={() => this.setState({ selectedTab: '新聞' })} > <MySelf navigation={navigation}/> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === '圈子'} title="圈子" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image style={styles.icon} source={require("../imgs/circle.png")} />} renderSelectedIcon={() => <Image style={styles.icon} source={require("../imgs/circleselected.png")} />} onPress={() => this.setState({ selectedTab: '圈子' })} > <MySelf navigation={navigation}/> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === '我的'} title="我的" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image style={styles.icon} source={require("../imgs/my.png")} />} renderSelectedIcon={() => <Image style={styles.icon} source={require("../imgs/myselected.png")} />} onPress={() => this.setState({ selectedTab: '我的' })} > <MySelf navigation={navigation}/> </TabNavigator.Item> </TabNavigator> </View> ); } } const styles = StyleSheet.create({ footer: { flex: 1, justifyContent: 'center', backgroundColor: '#F00', }, tabText: { color: '#000', textAlign: 'center', fontSize: 14, }, selectedTabText: { color: '#F00', textAlign: 'center', fontSize: 14, }, icon: { width: 20, height: 20 } });
MySelf頁面程式碼:
/** * Created by Administrator on 2017/7/19. */ import React, {Component} from 'react'; import { View, Text, TouchableOpacity } from 'react-native'; var navigation = null; export default class MySelf extends Component { constructor(props){ super(props); navigation = this.props.navigation; } render(){ return( <TouchableOpacity onPress={()=>navigation.navigate('List')}> <View style={{backgroundColor:'#FFF'}}> <Text>I am MySelf Page!!</Text> </View> </TouchableOpacity> ); } }