возникли проблемы с реактивной навигацией |undefined не является объектом (оценивается как _this.props.navigation ')

Question

Привет, я работаю над новым приложением реагировать на натив, но у меня были некоторые проблемы с переходом от компонента к экрану. это ссылка для кода на закуску: https://snack.expo.io/@mimonoux/my-app-navigation-test

я уже пробовал это <ButtonCarte onPress={() => this.props.navigation.navigate('Carte') } />. но это не сработало. пожалуйста, если кто-нибудь может помочь мне с этим, пожалуйста, проверьте ссылку закуски и взгляните на простой код, который я сделал для моей настоящей проблемы

Answer 1

Я видел твою проблему сейчас. С реагирует навигация , навигационные реквизиты существуют в компоненте, когда: либо компонент настроен в объекте конфигурации маршрута, который вы определили в App.js , либо вы используете withNavigation HOC (https://reactnavigation.org/docs/en/with-navigation.html)

Теперь в компоненте Medicine_listDetail this.props.navigation не существует, поскольку Medicine_listDetail не отображается на вашем маршруте, а также реквизитах объект не должен читаться 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>
  ); 
};

• Медицинский компонент: в функции all_medicine () я передаю навигационный объект в подпорки компонента Medicine_listDetail. Так что это хитрость.

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 я меняю название вкладки карт с Корзина на Карт из-за вашего стека 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',
      },
    }
  )
);

Я проверяю это, и оно работает для меня.

Answer 2

попробуйте добавить это:

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

Вот скриншот того, что доступно в подпорках со ссылкой на комментарии ниже:

Вот скриншот того, что я упомянул в комментариях. Вы можете увидеть, где я добавил console.log. В консоли показано, что хотя навигация находится в this.props, действия внутри навигации пусты. Я думаю, что это источник проблемы. Если вы добавите больше console.logs, как тот, который я сделал, вы увидите, где в проекте он теряет эту информацию.