关于navigator页面跳转的问题



  • 项目
    buildToolsVersion "23.0.1"
    0_1499233281426_image.png

    index.android.js中

    import { TabNavigator,StackNavigator } from 'react-navigation';
    import Product_Index from './product/index';
    import Home_Index from './home/index';
    const styles = StyleSheet.create({
      icon: {
        width: 26,
        height: 26,
      },
    });
    const App = TabNavigator({
      Home: {
        screen: Home_Index,
      },
      Product: {
        screen: Product_Index,
      },
      
    }, {
      tabBarOptions: {
        activeTintColor: '#fff',
        showIcon: true,
      },
       tabBarPosition:'bottom',
    });
    
    AppRegistry.registerComponent('App', () => App);
    

    /home/index.js中

    import { TabNavigator,StackNavigator } from 'react-navigation';
    import MyList from '../list';
    export default class Home_Index extends Component {
        static navigationOptions = {
        tabBarLabel: '首页',
        tabBarVisible: true,
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon name="ios-home" ></Icon>
        ),
      };
     constructor(props) {
        super(props);
    
        this.state = {
          products: null
        }
        this.navigatorpush = this.navigatorpush.bind(this);
      }
      navigatorpush() {
        console.log(2);//navigator
        this.props.navigator.push({
          Component: Product_Detail
        })
      }
    render() {
        return (
          <Container>
    <MyList navigatorpush={this.navigatorpush} />
     </Container>
        );
      }
    }
    

    list.js中

    import { StackNavigator, Navigator } from 'react-navigation';
    export default class MyList extends Component {
      constructor(props) {
        super(props);
        this.state = {
          products: null
        }
      } 
      navigatorpush() {
        console.log(1);
        this.props.navigatorpush();
      }
      render() {
        if (!this.state.products) {
          return this.renderLoadingView();
        }
        return (
          <Content>
            <List style={styles.list} dataArray={this.state.products} renderRow={(pro) =>
              <ListItem avatar style={styles.list_item} onPress={() => { this.navigatorpush() }}>
                ...
              </ListItem>
            }>
            </List>
          </Content>
        );
      }
    

    意思就是项目下面有两个home和product的TabNavigator,默认加载home/index,home/index页面有列表,列表是通过/list.js加载过来的,现在在list.js的行里面添加一个Onpress方法navigatorpush,子组件调用父组件的navigatorpush方法跳转到product/detail里面可是报错"Cannot read property 'push' of undefined",父组件的navigatorpush方法加断点
    0_1499234173454_image.png ,没有this.props.navigator.push()方法,这是什么原因,怎么解决


  • administrators

    react-navigation本来就只有navigation.navigate的用法
    navigator.push那是老的Navigator的方法



  • 现在我用
    this.props.navigation.navigate('Product_Detail', { id: id },);
    方法,Product_Detail必须要在
    0_1499242529219_image.png 里面加入Product_Detail的screen吗?因为这个是详情页的,不能显示在下面的导航条。不加入又无法跳转



  • 此回复已被删除!


  • @wangpengzong 需要用两个路由,一个主路由控制所有的页面跳转,一个tab的路由作为主路由中的一部分,跳转到Product_Detail需要在主路由中操作



  • 对的 问题已解决 https://q.cnblogs.com/q/95236/


登录后回复