关于reactnative[RN]的navigator页面跳转的问题
0
[已解决问题]
解决于 2017-07-06 15:45
项目
buildToolsVersion "23.0.1"
index.android.js中
1 import { TabNavigator,StackNavigator } from 'react-navigation'; 2 import Product_Index from './product/index'; 3 import Home_Index from './home/index'; 4 const styles = StyleSheet.create({ 5 icon: { 6 width: 26, 7 height: 26, 8 }, 9 }); 10 const App = TabNavigator({ 11 Home: { 12 screen: Home_Index, 13 }, 14 Product: { 15 screen: Product_Index, 16 }, 17 18 }, { 19 tabBarOptions: { 20 activeTintColor: '#fff', 21 showIcon: true, 22 }, 23 tabBarPosition:'bottom', 24 }); 25 26 AppRegistry.registerComponent('App', () => App);
/home/index.js中
1 import { TabNavigator, StackNavigator} from 'react-navigation'; 2 import Product_Detail from '../product/detail'; 3 export default class Home_Index extends Component { 4 static navigationOptions = { 5 tabBarLabel: '首页', 6 tabBarVisible: true, 7 tabBarIcon: ({ tintColor, focused }) => ( 8 <Icon name="ios-home" style={{ color: "#fff" }}></Icon> 9 ), 10 }; 11 constructor(props) { 12 super(props); 13 this.banners = [ 14 { 15 // title: 'beauty 1', 16 image: 'http://www...com/Upload/2016/06/22/636022053430106791.jpg', 17 }, 18 { 19 // title: 'beauty 2', 20 image: 'http://www...com/Upload/2016/06/22/636022102811783544.jpg', 21 }, 22 { 23 // title: 'The next banner has no title', 24 image: 'http://www...com/Upload/2016/06/22/636022103488417976.jpg', 25 }, 26 ]; 27 this.iosMarginTop = Platform.OS == 'ios' ? { marginTop: 20 } : {}; 28 29 this.state = { 30 defaultIndex: 0, 31 products: null 32 } 33 this.defaultIndex = 0; 34 this.navigatorpush = this.navigatorpush.bind(this); 35 } 36 navigatorpush(id) { 37 console.log(id);//navigator 38 const AppNavigator = StackNavigator({ 39 Product_Detail: { 40 screen: Product_Detail 41 } 42 }) 43 this.props.navigation.navigate('Product_Detail', { id: id }); 44 } 45 render() { 46 return ( 47 <Container> 48 <Content> 49 50 <MyList navigatorpush={this.navigatorpush} /> 51 </Content> 52 53 </Container> 54 ); 55 56 57 } 58 });
list.js中
1 import { StackNavigator, Navigator } from 'react-navigation'; 2 export default class MyList extends Component { 3 constructor(props) { 4 super(props); 5 this.state = { 6 products: null 7 } 8 } 9 navigatorpush() { 10 console.log(1); 11 this.props.navigatorpush(); 12 } 13 render() { 14 if (!this.state.products) { 15 return this.renderLoadingView(); 16 } 17 return ( 18 <Content> 19 <List style={styles.list} dataArray={this.state.products} renderRow={(pro) => 20 <ListItem avatar style={styles.list_item} onPress={() => { this.navigatorpush() }}> 21 ... 22 </ListItem> 23 }> 24 </List> 25 </Content> 26 ); 27 }
项目下面有两个home和product的TabNavigator，默认加载home/index，home/index页面有列表，列表是通过/list.js加载过来的
/home/index.js中的navigatorpush(id)方法中
1 this.props.navigation.navigate('Product_Detail', { id: id });
中Product_Detail因为没有在index.android.js的
1 const App = TabNavigator({ 2 Home: { 3 screen:Home_Index, 4 }, 5 Product: { 6 screen: Product_Index, 7 } 8 }
中定义无法跳转，但是定义了之后TabNavigator导航栏就多了一个detail的选项卡，这个选项卡在导航栏是无用的，错误的。请问下，这个情况下有什么办法可以绕过在app中定义或者定义之后不显示这一个选项卡？
最佳答案
0
1 const App = TabNavigator({ 2 Home: { 3 screen:Home_Index, 4 }, 5 Product: { 6 screen: Product_Index, 7 } 8 }
改为
const myTab = TabNavigator({ Home: { screen:Home_Index, }, Product: { screen: Product_Index, } } const App = StackNavigator({ MyTab:{ screen:MyTab, }, Detail:{ screen:Product_Detail, navigationOptions:({navigation,screenProps}) => ({ headerTitle:'产品详情', }) }, });
这样就可以在全局调用路由进行跳转了
