首页 新闻 搜索 专区 学院

关于reactnative[RN]的navigator页面跳转的问题

0
[已解决问题] 解决于 2017-07-06 15:45

项目
buildToolsVersion "23.0.1"
0_1499233281426_image.png

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中定义或者定义之后不显示这一个选项卡?

wpzblog的主页 wpzblog | 初学一级 | 园豆:30
提问于:2017-07-05 16:57
< >
分享
最佳答案
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:'产品详情',
        })
    },
});

这样就可以在全局调用路由进行跳转了

wpzblog | 初学一级 |园豆:30 | 2017-07-06 15:44
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册