StackNavigator 구성 요소를 통해 정의되지 않은 오류가 발생 함

Question

StackNavigator를 탐색에 사용하려고했는데 설명 된대로 here과 같이 한 화면에서 다른 화면으로 이동할 때 작동합니다. 그러나 탐색 할 하위 구성 요소가있을 때 탐색 기능이 작동하지 않는 것으로 보이며 해결책을 찾지 못했습니다.

아래 코드 에서처럼, HomeScreen에서 ChatScreen으로 이동하기 위해 클릭 할 수있는 버튼이있는 테스트 구성 요소를 사용하려고합니다.

저는 솔루션이 기본적인 것이라고 확신하지만 어디에서나 찾을 수는 없습니다. 내 질문에 충분히 분명 내가 희망 https://snack.expo.io/HyaT8qYob

:

여기

테스트에 대한 데모입니다 : 여기

import React from 'react'; 
import { 
    AppRegistry, 
    Text, 
    View, 
    Button 
} from 'react-native'; 
import { StackNavigator } from 'react-navigation'; 

class HomeScreen extends React.Component { 
    static navigationOptions = { 
    title: 'Welcome', 
    }; 
    render() { 
    const { navigate } = this.props.navigation; 
    let userName = 'Ketan'; 
    return (
     <View> 
     <Text>Hello, Chat App!</Text> 
     <Button 
      onPress={() => navigate('Chat', { user: userName })} 
      title={"Chat with " + userName} 
     /> 
     <Test /> 
     </View> 
    ); 
    } 
} 

class ChatScreen extends React.Component { 
    static navigationOptions = ({ navigation }) => ({ 
    title: `Chat with ${navigation.state.params.user}`, 
    }); 
    render() { 
    const { params } = this.props.navigation.state; 
    return (
     <View> 
     <Text>Chat with {params.user}</Text> 
     </View> 
    ); 
    } 
} 

class Test extends React.Component { 
    render() { 
    const { navigate } = this.props.navigation; 
    return (
     <View> 
     <Button 
      onPress={() => navigate('Chat', { user: 'TestBot' })} 
      title={'This is a test'} 
     /> 
     </View> 
    ) 
    } 
} 

const NavApp = StackNavigator({ 
    Home: { screen: HomeScreen }, 
    Chat: { screen: ChatScreen }, 
}); 

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

내가지고있어 오류입니다 : 여기

내 코드입니다 내 말 뜻대로.

Answer 1

Test 구성 요소가 탐색 스택에 속해 있지 않으므로 탐색 소품이 없습니다. 당신은 몇 가지 일을 할 수 있습니다.

간단한 예제는 아래 예제와 같이 하위 구성 요소에 탐색을 전달하는 것입니다.

return (
    <View> 
     <Text>Hello, Chat App!</Text> 
     <Button 
      onPress={() => navigate('Chat', { user: userName })} 
      title={"Chat with " + userName} 
     /> 
     <Test navigation={this.props.navigation} /> 
     </View> 
); 

두 번째 옵션을 사용하면 반응 네비게이션에서 withNavigation를 사용할 수있다. 그것에 대한 자세한 내용을보실 수 있습니다 here

import { Button } 'react-native'; 
import { withNavigation } from 'react-navigation'; 

const MyComponent = ({ to, navigation }) => (
    <Button title={`navigate to ${to}`} onPress={() => navigation.navigate(to)} /> 
); 

const MyComponentWithNavigation = withNavigation(MyComponent)