反应导航(安卓)导航错误

Question

我的英语水平很低，因为我来自韩语。 然后，我需要你们帮助伙计们。 我正在学习 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

你可以从反应导航中使用 HOC of withNavigaion 使用以下代码希望它会起作用

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

我看到你的答案并尝试，但你的代码很好，可以工作！ 但是我的代码不起作用...尝试了很多方法，但我还没有解决它。

主屏幕.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>
)
}
}

错误 -> 找不到变量：导航

Answer 3

哎呀！！解决了！谢谢！！

索引.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>
)
}
}