找不到变量：在屏幕之间导航

Question

我正在尝试借助反应导航在两个屏幕之间导航。我能够在渲染方法内部访问导航，因为它的范围也在该方法内。

我应该在哪里声明，以便我可以访问此组件的任何方法。我正在尝试访问可触摸不透明度onPress方法中的导航，但它给出了错误。

import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
TextInput,
ScrollView,
TouchableOpacity,
Image,
Button,
Platform,
SafeAreaView,
TouchableHighLight,
AsyncStorage
} from "react-native";
import { StackActions,  } from 'react-navigation';
import { Navigator,createStackNavigator } from 'react-native';
import Cards from  './Cards'
import Games from './Games'
import Icon from 'react-native-vector-icons/Ionicons'

class Bites extends Component {
constructor(props) {
super(props);
this.navigate = this.navigate.bind(this);
}
navigate = () => {
navigate('Games');
}
render() {
const {navigate} =this.props.navigation;{
}
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.container}>
<ScrollView
scrollEventThrottle={16}
horizontal={true}>
<TouchableOpacity   onPress={() => this.navigate('Games')}>
<View style={{paddingTop: 50, paddingHorizontal: 6, marginTop: 0,
height: 200,   shadowOpacity: 0.3, }}>
<Image
image
source={require('../assets/images/fortnite.jpg')}
style={{ flex: 1, height: 130, width: 300,
resizeMode: 'cover', borderRadius: 15,
borderWidth: 1, borderColor: '#dddddd' }}
/>
</View>
</TouchableOpacity>
</View>
</SafeAreaView>
);
}
}

export default Bites;
const styles = StyleSheet.create({
container: {
flex: 6,
backgroundColor: '#fff',
},
});
App.js SCREEN 
import React from 'react';
import {
StyleSheet,
Text,
View,
Images,
} from 'react-native';
import {createBottomTabNavigator, createStackNavigator} from 'react-navigation'
import Icon from 'react-native-vector-icons/Ionicons'
import Bites from   './screens/Bites'
import Create from  './screens/Create'
import Games from './screens/Games'
import Movies from './screens/Movies'
const App= (props) => {
const { navigate} =props.navigation;
}

const NavStackNavigator = createStackNavigator({
Games: Games
});

export default createBottomTabNavigator ({
Bites:  {
screen:Bites,
navigationOptions: {
tabBarLabel: 'Bites',
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-headset-outline" color={tintColor} size={24} />
)
}
},
Create: {
screen:Create,
navigationOptions: {
tabBarLabel: 'Create',
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-mic-outline" color={tintColor} size={24} />
)
}
}
},
{
tabBarOptions: {
activeTintColor: 'red',
inactiveTintColor: 'grey',
style: {
backgroundColor: 'white',
borderTopWidth: 0,
shadowOffset: { width: 5, height: 3 },
shadowColor: 'black',
shadowOpacity: 0.5,
elevation: 5
}
}
})
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

Answer 1

navigate()是导航器对象的函数。

您当地的navigate()应该是：

navigate = () => {
this.props.navigator.navigate('Games');
}

更新- 修复了"找不到变量游戏" 像这样更新您的createBottomTabNavigator()：

export default createBottomTabNavigator ({
Bites:  {
screen:Bites,
navigationOptions: {
tabBarLabel: 'Bites',
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-headset-outline" color={tintColor} size={24} />
)
}
},
Create: {
screen:Create,
navigationOptions: {
tabBarLabel: 'Create',
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-mic-outline" color={tintColor} size={24} />
)
}
}, 
Stack: NavStackNavigator
},
{
tabBarOptions: {
activeTintColor: 'red',
inactiveTintColor: 'grey',
style: {
backgroundColor: 'white',
borderTopWidth: 0,
shadowOffset: { width: 5, height: 3 },
shadowColor: 'black',
shadowOpacity: 0.5,
elevation: 5
}
}
})