반응 - 탐색 - 아이 컴퍼넌트를 탐색

Question

나는 구성 요소를 호출과 같이 그것에 그것을 데이터를 전달하는 리더가 있습니다

<TouchableOpacity onPress={() => this.props.navigation.navigate("Profile", { id: this.props.id})} > 
     <View> 
     <Right> 
       {arrowIcon} 
     </Right> 
     </View> 
    </TouchableOpacity> 

: 나는이 작업을 수행하려고

_renderItem =({item}) => (
    <childComponent 
     key={item._id} 
     id={item._id} 
     name={item.name} 
    /> 
    ); 

그리고 childComponent 내부를

내가 프로필 페이지로 가서 전달 된 ID를 기반으로 올바른 데이터를 가져 오기를 바란다. 문제는 프로필 페이지로 이동하기 위해 화살표를 클릭하면 오류가 발생합니다. 속성 '을 탐색 할 수 없습니다. 정의되지 않은 페이지로 이동. 나는 HomeDrawerrRoutes.js와 MainStackRouter.js에 leaderboard와 childComponent를 둘 다 넣었다. 어떤 도움이라도 좋을 것입니다.

Answer 1

이 하위 구성 요소에 navigate 기능을 전달하는 방법과 소품 MainStack``` 모습```않습니다 무엇 StackNavigator

// subcomponent ... receives navigate from parent 
const Child = (props) => { 
    return (
     <TouchableOpacity 
      onPress={() => props.navigate(props.destination) }> 
      <Text>{props.text}>>></Text> 
     </TouchableOpacity> 
    ); 
} 
// receives navigation from StackNavigator 
const PageOne = (props) => { 
    return (
     <View> 
      <Text>Page One</Text> 
      <Child 
       navigate={props.navigation.navigate} 
       destination="pagetwo" text="To page 2"/> 
     </View> 
    ) 
} 
// receives custom props AND navigate inside StackNavigator 
const PageTwo = (props) => (
    <View> 
     <Text>{props.text}</Text> 
     <Child 
      navigate={props.navigation.navigate} 
      destination="pagethree" text="To page 3"/> 
    </View> 
); 
// receives ONLY custom props (no nav sent) inside StackNAvigator 
const PageThree = (props) => <View><Text>{props.text}</Text></View> 

export default App = StackNavigator({ 
    pageone: { 
     screen: PageOne, navigationOptions: { title: "One" } }, 
    pagetwo: { 
     screen: (navigation) => <PageTwo {...navigation} text="Page Deux" />, 
     navigationOptions: { title: "Two" } 
    }, 
    pagethree: { 
     screen:() => <PageThree text="Page III" />, 
     navigationOptions: { title: "Three" } 
    }, 
});