代码之家 › 专栏 › 技术社区 › squeekyDave

React Native-如何在页面之间导航-错误:undefined不是函数(靠近,…(0,_reactNAvigation.StackNavigator)…)

react-native-navigation navigation react-native node.js javascript

0

squeekyDave · 技术社区 · 7 年前

我正在学习React Native,我正在尝试实现页面导航,当我单击巴顿,我想转到“关于”页。我遵循了一些指南,但到目前为止什么也没有。我得到的错误是 .

代码如下:

索引.js

/** @format */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, TouchableHighlight} from 'react-native';
import { createStackNavigator, StackNavigator } from "react-navigation";
import HomeScreen from './pages/home_screen.js';
import AboutPage from './pages/about_me.js';



// const instructions = Platform.select({
//   ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
//   android:
//     'Double tap R on your keyboard to reload,\n' +
//     'Shake or press menu button for dev menu',
// });



const RootStack = createStackNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    About: {
      screen: AboutPage,
    },
  },
  {
    initialRouteName: 'Home',
  }
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

主页屏幕.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, TouchableHighlight} from 'react-native';
import LinearGradient  from 'react-native-linear-gradient';
import LocationIcon from 'react-native-vector-icons/Entypo';
import SocMediaIcons from 'react-native-vector-icons/AntDesign';
import { createStackNavigator, createAppContainer } from "react-navigation";




const locationIcon = (<LocationIcon name="location" size={30} color="#6600cc" />);
const linkedInIcon = (<SocMediaIcons name="linkedin-square" size={30} color="#6600cc" />);
const instagramIcon = (<SocMediaIcons name="instagram" size={30} color="#6600cc" />);
const facebookIcon = (<SocMediaIcons name="facebook-square" size={30} color="#6600cc" />);



// const instructions = Platform.select({
//   ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
//   android:
//     'Double tap R on your keyboard to reload,\n' +
//     'Shake or press menu button for dev menu',
// });

class HomeScreen extends Component{
  render() {
    return (
      <LinearGradient
          colors={[ '#276b7a', '#0072a9', '#0071d9', '#3860f5', '#bc12eb']}
          style={styles.container}
        >
       <View style={styles.iconGrid}>
        <View style={{width: 195}}>
         <Text>{locationIcon} Mordor</Text>

        </View>
        <View style={{width: 70}} />
        <View style={{width: 30}} >
          {facebookIcon}
        </View>
        <View style={{width: 30 }} >
          {instagramIcon}
        </View>
        <View style={{width: 30}} >
          {linkedInIcon}
        </View>
      </View>

        <TouchableHighlight 
                style ={{
                    height: 50,
                    shadowColor: 'red',
                    width:260,
                    borderRadius:30,
                    backgroundColor : "rgba(255, 255, 255, 0.3)",
                    marginLeft :50,
                    marginRight:50,
                    marginTop : 250
                }}>
            <Button onPress={()=> this.props.navigation.navigate('About')}            
            title="Explore"
            accessibilityLabel="Explore Beautox"
            /> 
        </TouchableHighlight> 


      </LinearGradient>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',

  },
  button : {
     borderColor: 'red',
     backgroundColor: 'rgba(255, 255, 255, 1.0)'
  },
  iconGrid: {
    flexDirection: 'row',
    marginTop: 350,
    width: 350,
    marginRight: 10
  }
});

export default HomeScreen;

关于_me.js

import React, {Component} from 'react';
import LinearGradient  from 'react-native-linear-gradient';

    class AboutMe extends Component {
        render() {
         return(
           <View>
              <Text>Hello</Text>
              <Button
               title="Go back"
               onPress={() => this.props.navigation.goBack()}
                />
              </View>
            );
        }
    };

    export default AboutMe;

任何帮助都将不胜感激。

2 回复 | 直到 7 年前

1

0

Wainage 7 年前

Expo Snack 所有的代码。

class Home extends React.Component {
  static navigationOptions = {
    title: "Home",
  }
  render() {
    return (
      <View style={styles.container}>
        <Text>Home Page</Text>
        <Button onPress={() => this.props.navigation.navigate('About')} title="All about me" />
      </View>
    );
  }
}

class AboutMe extends React.Component {
  static navigationOptions = {
    title: "All Me",
  }
  render() {
    return (
      <View style={styles.container}>
        <Text>Home Page</Text>
        <Button onPress={() => this.props.navigation.goBack()} title="<< Back" />
      </View>
    );
  }
}

const AppScreens = createStackNavigator({
  Home: Home,
  About: AboutMe,
})

const App = createAppContainer(AppScreens);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

2

-1

Siraj Alam 7 年前

我认为你在使用react navigation v3。在 documentation ,很明显

注意:在v2和更早版本中,React导航中的容器由create*Navigator函数自动提供。从v3开始,您需要直接使用容器。在v3中,我们还将createNavigationContainer重命名为createAppContainer。

例子:

import { createAppContainer } from 'react-navigation';


const AppNavigator = createStackNavigator(...);

const AppContainer = createAppContainer(AppNavigator);

export default AppContainer;