博客

RN笔记-Navigator和TabNavigator

替换新的导航

安装教程


安装完之后报错：、

unable to resolve module 'react-navigation' from ......
This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:

1、Clear watchman watches: watchman watch-del-all.
2、Delete the node_modules folder: rm -rf node_modules && npm install.
3、Reset packager cache: rm -fr $TMPDIR/react-* or npm start --reset-cache

原因不详，解决如下：

首页移除node_modules命令如下：

rm -rf node_modules

然后重新加载只能使用npm，不要使用cnpm和yarn

npm install

之后报错找不到入口文件

查看端口命令:

win:lsof -n -i4TCP:8081
mac:lsof -i:8081

杀死端口命令：

通过键入shell来杀死它  kill -9 <PID>。使用与上一个答案中提供的相同的PID。

然后跑npm start。

kill 8081

React Navigation的使用心得

首先导入
import { StackNavigator } from 'react-navigation';
//组件类
class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    return <Text>Hello, Navigation!</Text>;
  }
}
//然后把组件类加入到导航组件中
const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
});

//重要 如果要使用导航，必须把导航添加为组件入口
// export default AppNav;
module.exports = AppNav;
//或者注册应用入口
//AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

React Navigation官网文档

开发高德地图使用js,必须配置plist文件如下：

1、iOS9为了增强数据访问安全，将所有的http请求都改为了https，为了能够在iOS9中正常使用地图SDK，请在”Info.plist”中进行如下配置，否则影响SDK的使用。

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

2、在iOS9中为了能正常调起高德地图App的功能，必须在”Info.plist”中将高德地图App的URL scheme列为白名单，否则无法调起，配置如下：

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>iosamap</string>
</array>

3、开启定位

需在info.plist中添加

NSLocationWhenInUseUsageDescription或NSLocationAlwaysUsageDescription字段

NSLocationWhenInUseUsageDescription

表示应用在前台的时候可以搜到更新的位置信息。

NSLocationAlwaysUsageDescription

表示应用在前台和后台（suspend或terminated)都可以获取到更新的位置数据。

react-native-amap插件的使用（iOS）

React Native开源高德地图定位组件(react-native-amap-location)