Реагировать на собственную навигацию неопределенная ошибка объекта - PullRequest
Новая
       33

Реагировать на собственную навигацию неопределенная ошибка объекта

1 голос
/ 04 февраля 2020

Я сталкиваюсь с ошибкой под названием «undefine - не объект» (оценивается как «_this.props»). Это очень простой код, который я использую с помощью современной функции реагировать на нативный. Здесь я не использую класс.

мой код это приложение. js

 import React from 'react';
import { StyleSheet, Text, View,TextInput,Button } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Routes from './Routes';


export default function App() {
  return (
    <Routes/>
  );
}

и маршрут. js

import React from 'react';
import { StyleSheet, Text, View,TextInput,Button } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { render } from 'react-dom';
/// define all components here
import HomeScreen from './src/Component/HomeScreen';
import DetailScreen from './src/Component/DetailScreen';


// Routes defination
export default function Routes(){
  const RootStack = createStackNavigator(
    {
      Home: HomeScreen,
      Details: DetailScreen,
    },
    {
      initialRouteName: 'Home',
    }
  );
  const AppContainer = createAppContainer(RootStack);
  return(
    <AppContainer/>
);
}

И домашний экран. js откуда Мне нужно это, чтобы перейти к подробному экрану 

import React from 'react';
import { StyleSheet, Text, View,TextInput,Button } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

export default function HomeScreen() {

    return (
        <View>
            <Text>I am testing from the home screen</Text>
            <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}></Button>
        </View>
    )

}

И DetailScreen. js

import React from 'react';
import { StyleSheet, Text, View,TextInput,Button } from 'react-native';

export default function DetailScreen() {

    return (
        <View>
            <Text>I am testing from the detail screen</Text>
        </View>
    )

}

Ответы [ 2 ]

0 голосов
/ 04 февраля 2020

Исправлено 

export default function HomeScreen(props) {

    return (
        <View>
            <Text>I am testing from the home screen</Text>
            <Button
          title="Go to Details"
          onPress={() => props.navigation.navigate('Details')}></Button>
        </View>
    )

}

, потому что this.props идет только в компоненте класса, но в компоненте функции он идет без 'this'

0 голосов
/ 04 февраля 2020

Попробуйте withNavigation от реагирования-навигации, вы видите эту ошибку, потому что вы не передаете навигацию от родителя. 

import React from 'react';
import { StyleSheet, Text, View,TextInput,Button } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import {withNavigation} from 'react-navigation'

export default withNavigation(function HomeScreen() {

    return (
        <View>
            <Text>I am testing from the home screen</Text>
            <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}></Button>
        </View>
    )

})
...