React-Navigation (android) ошибка навигации

Question

Мой уровень Engli sh очень низкий, потому что я из Кореи. тогда, мне нужна ваша помощь, ребята .. я изучаю React-native (android), я хочу переключить экран ... но навигация реагировать не работает. Я нахожу это решение в течение 1 дня ... но я не могу найти решение ... пожалуйста, помогите мне, ребята ..

Домашняя страница. js

import React, { Component } from 'react';
import { TouchableOpacity,StyleSheet, Text, View, Image } from 'react-native';

class HomeScreen extends React.Component {    
render() {             
  return (          
      <View style={styles.MasterContainer}>
          <NavBar/>
          <UserBar/>
          <View style={{height: 40,}}></View>
          <ButtonTab/>
          <Admob/>
          <TapBar/>
      </View>
  );
}
}

class NavBar extends React.Component {
render(){  
    const {navigation} = this.props;
    return(
        <View style={styles.NavBar}>
            <TouchableOpacity>
                <Text style={{fontWeight: 'bold',fontSize: 18, color: 'white'}} onPress ={() => 
navigation.navigate('NavPg')}>더보기</Text>
            </TouchableOpacity>
        </View>
    )
 }
}

Приложение. js

import React from 'react';
import HomePage from './screens/HomeScreen';
import NavPage from './screens'
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';

const App = createStackNavigator(
{
    Home: {screen:HomePage},
    NavPg: {screen:NavPage},
},
{initialRouteName:"Home", headerMode:'none'}
);

export default createAppContainer(App);

Answer 1

вы можете использовать HO C с Navigion из реагирующей навигации, используйте код ниже, надеюсь, он будет работать

 import { withNavigation } from 'react-navigation';

class NavBar extends React.Component {
render(){  
    const {navigation} = this.props;
    return(
        <View style={styles.NavBar}>
            <TouchableOpacity>
                <Text style={{fontWeight: 'bold',fontSize: 18, color: 'white'}} onPress ={() => 
navigation.navigate('NavPg')}>더보기</Text>
            </TouchableOpacity>
        </View>
    )
 }
}
export default withNavigation(NavBar);

Answer 2

Oops !! Решил это! Спасибо вам !!

index. js

class HomeScreen extends React.Component {    
render() {                          
  return (          
      <View style={styles.MasterContainer}>
          <NavBar navigation = {this.props.navigation}/>
          <UserBar/>
          <View style={{height: 40,}}></View>
          <ButtonTab/>
          <Admob/>
          <TapBar/>
      </View>
  );
}
}

class NavBar extends React.Component {
render(){            
    return(
        <View style={styles.NavBar}>
            <TouchableOpacity>
                <Text style={{fontWeight: 'bold',fontSize: 18, color: 'white'}} 
onPress={() => this.props.navigation.navigate('NavPg')}>더보기</Text>
            </TouchableOpacity>
        </View>
    )
}
}

Answer 3

Я вижу ваш ответ и пробую, но ваш код хорош и работает! Однако мой код не работает ... пытался во многих отношениях, но я не решил его.

HomeScreen. js

import React, { Component } from 'react';
import { TouchableOpacity,StyleSheet, Text, View, Image } from 'react-native';
import { withNavigation } from 'react-navigation';


 class HomeScreen extends React.Component {    
 render() {                  
    const {navigation} = this.props;
  return (          
      <View style={styles.MasterContainer}>
          <NavBar navigation/>
          <UserBar/>
          <View style={{height: 40,}}></View>
          <ButtonTab/>
          <Admob/>
          <TapBar/>
      </View>
  );
 }
 }

 class NavBar extends React.Component {
 render(){                
    return(
        <View style={styles.NavBar}>
            <TouchableOpacity>
                <Text style={{fontWeight: 'bold',fontSize: 18, color: 'white'}}     
 onPress={() => navigation.navigate('NavPg')}>더보기</Text>
            </TouchableOpacity>
        </View>
    )
 }
}

Ошибка -> Не могу найти переменную: навигация