Реагируйте на native - undefined не является объектом («оценивает this.props.navigation») - PullRequest
Новая
       34

Реагируйте на native - undefined не является объектом («оценивает this.props.navigation»)

0 голосов
/ 03 июня 2018

Ожидаемое поведение: должен быть открыт ящик с значком меню в заголовке.

Текущее поведение: сообщение об ошибке undefined is not an object ('evaluating this.props.navigation')

Поиск ошибки мне не помог.

Я разделил навигацию на два файла: RootNavigation.js и MainTabNavigation

RootNavigation.js 

const AppNavigator = createSwitchNavigator({

  Main: MainTabNavigator,
});
const DrawerStack = createDrawerNavigator({
  Home: {
    screen: AppNavigator
  },
  Login: {
    screen: login
  },
  Signup: {
    screen: signup
  }
});

export default class RootNavigation extends React.Component {
  componentDidMount() {
    this._notificationSubscription = this._registerForPushNotifications();
  }

MainTabNavigation.js 

const HomeStack = createStackNavigator({
  Home: HomeScreen,
});

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-home${focused ? '' : '-outline'}`
          : 'md-home'
      }
    />
  ),   
};

const LinksStack = createStackNavigator({
  Links: LinksScreen,
});

LinksStack.navigationOptions = {
  tabBarLabel: 'Shops',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? `ios-list${focused ? '' : '-outline'}` : 'md-list'}
    />
  ),
};

const SettingsStack = createStackNavigator({
  Settings: SettingsScreen,
});

SettingsStack.navigationOptions = {
  tabBarLabel: 'Cart',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? `ios-cart${focused ? '' : '-outline'}` : 'md-cart'}
    />
  ),
};

export default createBottomTabNavigator({
  HomeStack,
  LinksStack,
  SettingsStack,
});

MainTab файл, который отображает значок в заголовке 

static navigationOptions = ({navigation}) =>({
  title: 'Home',
  headerLeft: <Ionicons 
                name="md-menu" 
                size={25} 
                color="blue" 
                style={{ margin: 7,}}
                onPress={() => this.props.navigation.navigate('DrawerOpen')} 
                />
});

Ответы [ 2 ]

0 голосов
/ 03 июня 2018

вы должны это знать, когда вы создаете компонент класса ведьмы, как этот 

class MyComponent extends ....

, если вы хотите использовать какие-либо реквизиты, вы должны написать этот KeyWord, например, 

this.props.navigation.nvigate()

, но есливы создаете компонент с функцией стрелки, подобной этой 

const Mycomponent = (props) => {}

, вам не нужен этот KeyWord, и для реквизитов вызовов вы должны написать так 

 props.navigation.navigate()

, и в вашем случае, если использовать компонент внутри опцииНавигация вам не нужна или реквизит KeyWord, просто напишите 

 navigation.navigate()
0 голосов
/ 03 июня 2018

Как объяснено в документации здесь , когда navigationOptions используется в качестве функции, this не относится к экземпляру компонента;поэтому this.props недоступно.

Вместо этого вам необходимо заменить:

this.props.navigation.navigate('DrawerOpen')

на:

navigation.navigate('DrawerOpen')

В качестве альтернативы вы можете использовать помощник navigation.openDrawer(), как показано в примере здесь , поскольку при переходе к DrawerOpen подразумевается, что вы хотите перейти к экрану с этим именем.

...