Question

我试图借助react-navigation在两个屏幕之间导航。我可以在render方法内部访问导航，因为它的范围也在该方法内部。

我应该在哪里声明，以便可以访问此组件的任何方法。我正在尝试在TouchableOpacity 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
  }
}
})

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

1 个答案: