React Native學習記錄

一、新建項目

1、安裝react環境

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模塊的下載。React Native 的命令行工具用于執行創建、初始化、更新項目、運行打包服務（packager）等任務。
npm install -g yarn react-native-cli

2、初始化項目

因為npm的服務器是架在國外的 , 在國內的訪問速度不行 , 為了提高npm的下載速度 , 我們可以使用淘寶的npm鏡像. 
執行下面兩條命令應該就可以解決初始化項目時這個報錯. 
npm config set registry https://registry.npm.taobao.org 
npm config set disturl https://npm.taobao.org/dist
react-native init 項目名

3、連接安卓機：

模擬器：adb connect 127.0.0.1:21503
真機：adb connect 127.0.0.1:5307

4、啟動項目

react-native run-android

二、獲取地理位置

1、添加權限

iOS
你需要在Info.plist中增加NSLocationWhenInUseUsageDescription字段來啟用定位功能。如果你使用react-native init創建項目，定位會被默認啟用。
Android
要請求訪問地理位置的權限，你需要在AndroidManifest.xml文件中加入如下一行：

< uses-permission android:name=”android.permission.ACCESS_FINE_LOCATION” />

在這里插入圖片描述

2、編寫代碼

在核心代碼區添加代碼
在這里插入圖片描述

componentDidMount() {
        //獲取地理位置
        navigator.geolocation.getCurrentPosition(
            (coords) => {
                this.setState(coords);
                console.log(coords)
            },
            (error) => console.error(error)
        );
        //持續監聽位置，每當位置變化調用success回調.
        this.watchID = navigator.geolocation.watchPosition((lastPosition) => {
            this.setState({lastPosition});
        });
    }

在顯示區添加代碼
在這里插入圖片描述
代碼：

<Text>緯度:{this.state.coords?this.state.coords.latitude:'獲取中'}</Text>
<Text>經度:{this.state.coords?this.state.coords.longitude:'獲取中'}</Text>

效果：
在這里插入圖片描述

本文鏈接：https://blog.csdn.net/weixin_38457055/article/details/89024411

智能推薦

React-native 爬坑記錄

近年來react-native火爆，原生的已經沒有以前那么吃香了。所以趕緊入手學習，沒想到一上來就各種紅屏白屏。。。 react-native版本 0.55.4 可通過npm info react-native查詢 react版本 16.4.0 可通過npm info react查詢測試機紅米5 plus android 7.1.2 現在開始創建一個新的項目，環境搭建什么的可以參考react...

react native添加facebookSDK使用記錄

這次的項目要用到facebook的廣告所以首先是肯定要把facebook的SDK集成進項目里的，不過我自己對原生的編寫可是不懂的啊,那怎么搞？,難道要在歡笑中打出GG了,于是乎我就祭出了谷歌搜索在搜索一番后發現原來facebook的官方早已經幫我準備好了接入facebookSDK的插件那就是react-native-fbsdk。 React Native FBSDK是iOS Facebook SD...

如何在React Native中記錄日志？

本文翻譯自：How to do logging in React Native? 如何為Web開發時在React Native中記錄變量，例如使用console.log ？ #1樓參考：https://stackoom.com/question/22MNo/如何在React-Native中記錄日志 #2樓 console.log works. console.log有效。 By default ...

react native

一、移動APP 開發技術選型進化第一階段 Native 1.性能優秀 2.開發效率低下，不可跨端第二階段 Native H5/Hybrid 1.Hybrid多端運行，解決了開發效率問題 2.性能存在瓶頸現階段 Native H5/Hybrid React Native 二、開發進階-頁面性能頁面(Page)切換卡頓問題頁面切換...

React Native

中文網站：https://reactnative.cn/docs/getting-started 安裝環境在Mac平臺上開發React Native需要安裝以下環境和工具： Note.js React Native Command Line Tools XCode/AndroidStudio 1、安裝Node.js React Native開發需要用到Node.js環境。我們做React Nat...