react-navigation 第三方库安装

2019-04-23  本文已影响0人  Th丶小伟

由于react-navigation更新比较快 。本文写于2019-4-23
昨天弄了一整天的坑。网上资料过时造成的。
主要出现的BUD 输出:
npm install react-navigation --save 之后项目运行不了

import { StackNavigator} from "react-navigation"; 之后项目出错

Module AppRegistry is not a registered callable module 启动目录不对等等。
最后还是去官方看英文文档才发现已经改了方式。
react-navigation 官方英文

这个教训让我以后出问题最好是去官网看之后再百度&Google

cd 到项目目录之后 依次执行命令:
yarn add react-navigation
yarn add react-native-gesture-handler
链接所有本机依赖项:
react-native link react-native-gesture-handler

index.js不需要改动  在APP.js里面加入以下代码

import React from 'react';
import { View, Text, Button } from 'react-native';
import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation';
import HelloWorld from "./跳转类/HelloWorld";  

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: '首页'
  }
  render() {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>Home Screen</Text>
          <Button
              title="Go to Details"
              // onPress={() => this.props.navigation.push('WelCome')}
              onPress={() => this.props.navigation.navigate('WelCome')}

            


          />
        </View>
    );
  }
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
  }, 
  WelCome: {
    screen: HelloWorld,
  },
});

export default createAppContainer(AppNavigator);

跳转函数和集成命令都有改动。
end

上一篇下一篇

猜你喜欢

热点阅读