이 예제에서 반응 탐색을 정확히 사용하는 방법

Question

반응 탐색을 배우려고합니다. 순간 나는 오류와 함께 갇히지 오전 : 그래서 여기

Cannot read property 'navigate' of undefined 
TestComponent.render 
    TestComponent.js:17:12 
TestComponent.proxiedMethod 
    createPrototypeProxy.js:44:29 
<unknown> 
    ReactNativeStack-dev.js:1863:24 
measureLifeCyclePerf 
    ReactNativeStack-dev.js:1610:15 
ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext 
    ReactNativeStack-dev.js:1862:33 
ReactCompositeComponentWrapper._renderValidatedComponent 
    ReactNativeStack-dev.js:1872:39 
ReactCompositeComponentWrapper.performInitialMount 
    ReactNativeStack-dev.js:1696:62 
ReactCompositeComponentWrapper.mountComponent 
    ReactNativeStack-dev.js:1655:164 
Object.mountComponent 
    ReactNativeStack-dev.js:1327:38 
ReactCompositeComponentWrapper.performInitialMount 
    ReactNativeStack-dev.js:1703:39 

내 코드입니다

index.android.js

import React, {Component} from 'react'; 
import {AppRegistry} from 'react-native'; 
import DemoStore from './src/stores/DemoStore'; 
import { StackNavigator } from 'react-navigation'; 
import PoolListComponent from "./src/components/PoolListComponent"; 
import TestComponent from "./src/components/TestComponent"; 

export default class TestApp extends Component { 
    render() { 
    const nav = StackNavigator({ 
     Home: {screen: TestComponent}, 
     Pools: {screen: PoolListComponent} 
    }); 


    return (
     <TestComponent store={DemoStore} /> 
    ) 
    } 
} 

AppRegistry.registerComponent('TestApp',() => TestApp); 

TestComponent

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


export default class TestComponent extends Component { 

    static navigationOptions = { 
    title: 'Home', 
    }; 

    constructor(props) { 
    super(props); 
    } 

    render() { 
    const { navigate } = this.props.TestApp; 
    return (
     <View> 
     <Button 
      title="Pool overview " 
      onPress={() => 
      //navigation.navigate('Pools') 
      console.log(this.props.TestApp) 
      } 
     /> 
     </View> 
    ); 
    } 

} 

나는 아냐. StackNavigator를 내 TestComponent에 index.android.js에 전달하는 방법을 알려주세요. 나는 재산으로 이렇게 그것을 통과하는 것을 시도했다 : <TestComponent store={DemoStore} navigation={nav}/> 그러나 이것은 또한 작동하지 않았다.

에서 실행 :

1. "반응 네이티브": "0.48.1"를,
2. "반응-탐색"을 "^ 1.0.0-beta.15을"

감사.

Answer 1

조금 혼란 스럽네요. 먼저 네비게이터를 만든 다음 주 구성 요소에서 렌더링해야합니다. 그런 다음 화면 구성 요소에 this.props.navigation을 입력하면됩니다.

예

export default class TestApp extends Component { 
    render() { 
    const Navigator = StackNavigator({ 
     Home: {screen: TestComponent}, 
     Pools: {screen: PoolListComponent} 
    }); 


    return (
     <Navigator store={DemoStore} /> 
    ) 
    } 
} 

---

export default class TestComponent extends Component { 

    static navigationOptions = { 
    title: 'Home', 
    }; 

    constructor(props) { 
    super(props); 
    } 

    render() { 
    const { navigate } = this.props.navigation; 
    return (
     <View> 
     <Button 
      title="Pool overview " 
      onPress={() => 
      navigate('Pools') 
      } 
     /> 
     </View> 
    ); 
    } 
}