无法读取未定义的属性推送

时间:2017-06-27 09:13:20

标签: react-native react-native-navigation

我正在尝试使用react-native-navigation组合我的第一个应用程序,我正在从网站上的可用示例中获取部分。

无论如何,我现在正尝试使用推送功能显示新屏幕,但导航器似乎未定义:

结构是:

- app.js
  - firstScreenTab
      - pushScreenTab
  - secondScreenTab

导航器显然是在app.js文件中定义的。

在我的firstScreenTab中:

testNavPress() {
    this.props.navigator.push({
        screen: 'manager.SecondTabScreen',
    title: 'Pushed Screen'
});
}

 <Button onPress={this.testNavPress.bind(this)}>
      Push
 </Button>

`

我使用redux设置我的应用程序,我想知道如何将导航器作为道具传递?

app.js 中的启动应用功能如下所示:

startApp(root) {
console.log(root);
console.log('START APP!!!!!');

const tabs = [
  {
      label: 'Employees', // tab label as appears under the icon in iOS (optional)
      screen: 'manager.EmployeeListScreen', // unique ID registered with Navigation.registerScreen
      icon: require('../img/one.png'), // local image asset for the tab icon unselected state (optional on iOS)
      selectedIcon: require('../img/one_selected.png'), // local image asset for the tab icon selected state (optional, iOS only. On Android, Use `tabBarSelectedButtonColor` instead)
      iconInsets: { // add this to change icon position (optional, iOS only).
        top: 6, // optional, default is 0.
        left: 0, // optional, default is 0.
        bottom: -6, // optional, default is 0.
        right: 0 // optional, default is 0.
      },
      title: 'Employee List', // title of the screen as appears in the nav bar (optional)
      navigatorStyle: {}, // override the navigator style for the tab screen, see "Styling the navigator" below (optional),
      navigatorButtons: {
        rightButtons: [

              {
                icon: require('../img/navicon_add.png'), // for icon button, provide the local image asset name
                id: 'add' // id for this button, given in onNavigatorEvent(event) to help understand which button was clicked
              }
            ]
      } // override the nav buttons for the tab screen, see "Adding buttons to the navigator" below (optional)
    },
  {
      label: 'One', // tab label as appears under the icon in iOS (optional)
      screen: 'manager.FirstTabScreen', // unique ID registered with Navigation.registerScreen
      icon: require('../img/one.png'), // local image asset for the tab icon unselected state (optional on iOS)
      selectedIcon: require('../img/one_selected.png'), // local image asset for the tab icon selected state (optional, iOS only. On Android, Use `tabBarSelectedButtonColor` instead)
      iconInsets: { // add this to change icon position (optional, iOS only).
        top: 6, // optional, default is 0.
        left: 0, // optional, default is 0.
        bottom: -6, // optional, default is 0.
        right: 0 // optional, default is 0.
      },
      title: 'Screen One', // title of the screen as appears in the nav bar (optional)
      navigatorStyle: {}, // override the navigator style for the tab screen, see "Styling the navigator" below (optional),
      navigatorButtons: {} // override the nav buttons for the tab screen, see "Adding buttons to the navigator" below (optional)
    },
    {
      label: 'Two',
      screen: 'manager.SecondTabScreen',
      icon: require('../img/two.png'),
      selectedIcon: require('../img/two_selected.png'),
      title: 'Screen Two'
    }
];


switch (root) {
  case 'user':
     Navigation.startTabBasedApp({
      tabs,
      tabsStyle: {
        tabBarButtonColor: 'white',
        tabBarSelectedButtonColor: 'white',
        tabBarBackgroundColor: '#099880'
      }
    });
    break;
  default: 
     Navigation.startSingleScreenApp({
      screen: {
        screen: 'manager.LoginScreen', // unique ID registered with Navigation.registerScreen
        title: 'Log in', // title of the screen as appears in the nav bar (optional)
        navigatorStyle: {}, // override the navigator style for the screen, see "Styling the navigator" below (optional)
        navigatorButtons: {} // override the nav buttons for the screen, see "Adding buttons to the navigator" below (optional)
      }
    });
  }
  } // startApp
}
export default App;

我浏览了其他问题,但大多数问题都是反应导航,我正在使用react-native-navigation。

1 个答案:

答案 0 :(得分:1)

Navigation.startTabBasedApp没有使用navigator - 它只是根据您提供的对象调用构建UI的本机方法。

请务必在super(props)中致电firstScreentab,以便RNN可以将导航器注入您的屏幕。