反应本机导航有问题| undefined 不是一个对象（评估'_this.props.navigation'）

Question

嗨，我正在开发一个新的本机反应应用程序，但我在从组件到屏幕的导航方面遇到了一些问题。这是零食代码的 link：https://snack.expo.io/@mimonoux/my-app-navigation-test

我已经试过了 <ButtonCarte onPress={() => this.props.navigation.navigate('Carte') } />。但它没有用。如果有人可以帮我解决这个问题，请查看小吃 link 并深入了解我为实际问题编写的简单代码

Answer 1

尝试添加这个：

import { NavigationEvents, NavigationActions } from 'react-navigation';

以下是道具中可用内容的屏幕截图，参考以下评论：

这是我在评论中提到的截图。你可以看到我在哪里添加了console.log。它在控制台中显示，虽然导航在 this.props 中，但导航中的操作是空的。我认为这是问题的根源。如果像我所做的那样放置更多 console.logs，您将看到它在项目中的哪个位置丢失了该信息。

Answer 2

我现在看到你的问题了。用 react-navigation, navigation props 存在于一个组件中，当：该组件配置在您在 App.js 中定义的路由配置对象中，或者您使用 withNavigation HOC ( https://reactnavigation.org/docs/en/with-navigation.html )。

现在在 Medicine_listDetail 组件中 this.props.navigation 不存在，因为 Medicine_listDetail 不会出现在您的路线中，而且 props 对象不应被 this.props 读取一个功能组件。您可以采用以下两种方式之一：

const Medicine_listDetail = ({medicine, navigation}) => {
    // i'm passing navigation props comme from parent component that have
    // navigation object
    // ...
}

// OR you can do

const Medicine_listDetail = (props) => {
    const { medicine, navigation } = props;
    // i'm passing navigation props comme from parent component that have
    // navigation object
    // ...
}

因此，以下是对适合我的解决方案的尝试。

Medicine_listDetail 组件：我传递的导航道具来自具有导航对象的父组件

...
const Medicine_listDetail = ({medicine, navigation}) => {

    const {title, coordinate} = medicine;
    const {
        headerContentStyle,
        headerTextStyle,
        cityTextStyle,
        addTextStyle,
        infoContainerStyle,
        buttonsContainerStyle,
        specialityTextStyle,
        buttonStyle,
        textStyle
        } = styles


    return (
    <View>

        <View style={headerContentStyle}>
            <Text style={headerTextStyle}>{title}</Text>
        </View>

        <View style={buttonsContainerStyle}>
          <ButtonCarte  onPress={() => navigation.navigate('Carte') }>
          </ButtonCarte>
        </View>
    </View>
    );
};
...

ButtonCarte 组件

const ButtonCarte = ({onPress, children}) => {
  const {buttonStyle, textStyle} = styles;

  return (
    <TouchableOpacity onPress={() => onPress()} style={buttonStyle}>
        <Ionicons name={'ios-pin'} size={20} color="white" />
        <Text style={textStyle}>
          Voir La Carte
        </Text>
    </TouchableOpacity>
  ); 
};

Medicin 组件：在 all_medicine() 函数中，我在 Medicine_listDetail 组件的 props 中传递导航对象。这就是诀窍。

export default class Medicin extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      list_allMedicine: data_allMedicine,
      selectedIndex: 0,
    };
    this.updateIndex = this.updateIndex.bind(this);
  }

  updateIndex(selectedIndex) {
    this.setState({ selectedIndex });
  }

  all_medicine() {
    const { navigation } = this.props;
    return this.state.list_allMedicine.map(medicine => (
      <Medicine_listDetail key={medicine.title} medicine={medicine} navigation={navigation} />
    ));
  }

  render() {
    const buttons = ['Tout', '...', '...', '...'];
    const { selectedIndex } = this.state;
    return (
      <View style={{ flex: 1}}>
        <View
          style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <ButtonGroup
            onPress={this.updateIndex}
            selectedIndex={selectedIndex}
            buttons={buttons}
            containerStyle={{ borderRadius:8 }}

          />
        </View>
        <Divider
          style={{
            backgroundColor: 'lightgrey',
            marginHorizontal: 5,
            height: 2,
          }}
        />
        <View style={{ flex: 5 }}>
          {this.state.selectedIndex == 0 ? (
            <ScrollView>{this.all_medicine()}</ScrollView>
          ) : (
            <Text>test</Text>
          )}
        </View>
      </View>
    );
  }
}

至少在 App.js，我将 carte 选项卡的名称从 Cart 更改为 Carte 因为你的 RootStack 堆栈。

export default createAppContainer(
  createBottomTabNavigator(
    {
      Home: {
        screen: Home,
        navigationOptions: {
          tabBarLabel: 'Home',
          tabBarIcon: ({ tintColor }) => (
            <Ionicons name={'ios-home'} size={25} color={tintColor} />
          ),
        },
      },
      Medicin: {
        screen: Medicin,
        navigationOptions: {
          tabBarLabel: 'Medicin',
          tabBarIcon: ({ tintColor }) => (
            <Image
              source={require('./assets/images/Dashboard/drawable-xhdpi/doctor_heart.png')}
              style={{ width: 25, height: 20, tintColor: tintColor }}
            />
          ),
        },
      },
      Carte: {
        screen: Carte,
        navigationOptions: {
          tabBarLabel: 'Carte',
          tabBarIcon: ({ tintColor }) => (
            <Ionicons name={'ios-map'} size={25} color={tintColor} />
          ),
        },
      },
    },
    {
      tabBarOptions: {
        activeTintColor: 'black',
        inactiveTintColor: 'gray',
      },
    }
  )
);

我测试了这个，它对我有用。

反应本机导航有问题| undefined 不是一个对象（评估'_this.props.navigation'）

having problem with react-native navigation | undefined is not an object (evaluating '_this.props.navigation')

navigation

react-native

react-redux

react-native-navigation

react-navigation