React-Native 导航-1

找了很多资料，看了头大，去GitHub上搜到了两个不错的文档

https://wix.github.io/react-native-navigation/docs/before-you-start/#!

https://reactnavigation.org/docs/getting-started

前置内容:react native 环境搭建

1.在本地文件夹内执行

react-native init ReactNativeNavigation

init后面的名字可以自己取，执行完毕的效果就是在本地新建一个名为ReactNativeNavigation的目录。里面是自动生成的项目

打开android studio,点击工具栏的file，打开此目录下的android文件夹，然后点击执行按钮

这时弹出模拟器窗口，结果如下：

说明第一步没有问题

2.在ReactNativeNavigation目录下在命令提示符执行

npm install @react-navigation/native

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

3.修改ReactNativeNavigation目录下的App.js文件，内容如下：

import { NavigationContainer } from '@react-navigation/native';

import React ,{
  Component
} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

export default class App extends Component {
  constructor(props) {
    super(props);
   
  }
render(){
  return <Text>hello</Text>
}
}

 模拟器效果如下:

现在按照文档的内容，在App.js写入

import 'react-native-gesture-handler';

这时报错了：

TypeError:null is not an object (evaluating '_RNGestureHandlerModule.default.Direction'))

执行

react-native link react-native-gesture-handler

仍旧没有什么用

而且说明了高版本的不用link

From React Native 0.60 and higher, linking is automatic. So you don't need to run react-native link.

卡了两天了，跳过吧

修改App.js的内容

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

报错：undefined Unable to resolve module '@react-navigation/stack' from 'App.js'

那么就安装这个模块吧

npm install @react-navigation/stack

仍旧不起作用。

最后 android studio中Http proxy选择no proxy

File->Invalidate Caches->Invalidate and Restart

打开gradle.properties文件，路径在C:\Users\你的用户名\.gradle\gradle.properties

注释掉里面的proxy设置

然后react-native start

react-native run-android

结果如下：

不容易啊