React第6天

RN學習說明

ReactNative是基於React這門框架的語法來進行開發的；
RN中，提供了移動端專用的一些組件，這時候，我們在網頁中使用的一些元素，div, p, img 都不能用了，只能使用RN固有的組件；
最終，開發出來的項目，是要運行到手機上的，那麼，如何把一個 RN 的項目，完整的發佈到手機上去運行呢，這裏，需要結合安卓的簽名打包步驟，並使用 RN 提供的打包命令，進行完整 apk 文件的發佈；最終發佈出來的就是 Release 版本的項目，可以上傳到應用商店；

配置ReactNative基本開發環境

搭建基本的開發環境 - 英文官網

 搭建基本的開發環境 - 中文
這兩篇文檔對比着進行參考，進行相關的安裝；

手機的相關配置

使用數據線，把手機鏈接到電腦上；
運行 adb devices 的命令，這個命令，是安卓開發環境提供的；
需要先開啓手機的開發者模式
如果開啓開發者模式之後，還是看不到設備，則嘗試安裝 豌豆莢 這樣的工具，讓這些工具幫助你在電腦上安裝手機的驅動；

搭建RN的項目

運行react-native init 項目名稱來初始化一個react native項目；
打包運行項目，把打包好的項目部署到手機中！

確保手機已經正確的鏈接到了當前電腦上，同時手機開啓了開發者調試模式；可以使用adb devices來查看當前鏈接到電腦上的手機設備列表！
當確認手機正確鏈接到電腦上之後，可以運行react-native run-android來打包當前項目，並把打包好的項目以調試的模式安裝到手機中！
打包完成之後的截圖
React Package窗口的作用
04.React Packager打包編譯代碼截圖
當第一打包編譯項目部署到手機上之後 - 如何設置開發服務器的地址

項目結構介紹以及一些注意事項

使用樣式

##修改項目首屏頁面

基本組件的使用介紹

View：
Text：
TextInput：
Image：
Button：
ActivityIndicator：
ScrollView：這是一個列表滾動的組件
ListView：也是一個列表滾動的組件，但是，這個組件已經過時了，官方推薦使用 FlatList 來代替它

判斷組件是否被卸載

if (this._reactInternalInstance){
	// 組件沒有被卸載
}

配置Tab欄

配置Tab欄的圖標

注意：使用圖標，需要使用 Android SDK Manager 安裝 Android SDK Build-tools 26.0.1 並接收其 license;

案例：豆瓣電影列表

電影列表數據：https://api.douban.com/v2/movie/in_theaters
電影詳細數據：https://api.douban.com/v2/movie/subject/26309788

安裝路由

運行npm i react-native-router-flux --save
路由官網：https://github.com/aksonov/react-native-router-flux
路由相關配置：https://github.com/aksonov/react-native-router-flux/blob/master/docs/API.md
路由簡單的DEMO：https://github.com/aksonov/react-native-router-flux/blob/v3/docs/MINI_TUTORIAL.md

路由的一些基本使用方法

配置首頁的輪播圖

輪播圖官網：https://github.com/leecade/react-native-swiper?utm_source=tuicool&utm_medium=referral
運行npm i react-native-swiper --save安裝輪播圖組件
導入輪播圖組件import Swiper from 'react-native-swiper';
其中，在Swiper身上，showsPagination={false}是用來控制頁碼的；showsButtons={false}是用來控制左右箭頭顯示與隱藏；height={160}是用來控制輪播圖區域的高度的！
設置輪播圖的樣式：

var styles = StyleSheet.create({
    wrapper: {},
    slide1: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#9DD6EB',
    },
    slide2: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#97CAE5',
    },
    slide3: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#92BBD9',
    },
    image:{
        width:'100%',
        height:'100%'
    }
})

將組件的代碼結構引入到頁面上：

<Swiper style={styles.wrapper} showsButtons={true} height={160} autoplay={true}>
                <View style={styles.slide1}>
                    <Image source={{uri:'http://www.itcast.cn/images/slidead/BEIJING/2017410109413000.jpg'}} style={styles.image}></Image>
                </View>
                <View style={styles.slide2}>
                    <Image source={{uri:'http://www.itcast.cn/images/slidead/BEIJING/2017440109442800.jpg'}} style={styles.image}></Image>
                </View>
                <View style={styles.slide3}>
                    <Image source={{uri:'http://www.itcast.cn/images/slidead/BEIJING/2017441409442800.jpg'}} style={styles.image}></Image>
                </View>
            </Swiper>

首頁輪播圖片URL地址：

圖片地址1：http://www.itcast.cn/images/slidead/BEIJING/2017410109413000.jpg
圖片地址2：http://www.itcast.cn/images/slidead/BEIJING/2017440109442800.jpg
圖片地址3：http://www.itcast.cn/images/slidead/BEIJING/2017441409442800.jpg

渲染電影列表數據

渲染電影詳情頁面

調用攝像頭拍照

react-native-image-picker的github官網
 react native 之 react-native-image-picke的詳細使用圖解

運行npm install react-native-image-picker@latest --save安裝到項目運行依賴，此時調試可能會報錯，如果報錯，需要使用下面的步驟解決：
- 先刪除node_modules文件夾
- 運行npm i
- 運行npm start --reset-cache
運行react-native link自動註冊相關的組件到原生配置中
打開項目中的android->app->src->main->AndroidManifest.xml文件，在第8行添加如下配置：

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

打開項目中的android->app->src->main->java->com->當前項目名稱文件夾->MainActivity.java文件，修改配置如下：

package com.native_camera;
import com.facebook.react.ReactActivity;

// 1. 添加以下兩行：
import com.imagepicker.permissions.OnImagePickerPermissionsCallback; // <- add this import
import com.facebook.react.modules.core.PermissionListener; // <- add this import

public class MainActivity extends ReactActivity {
    // 2. 添加如下一行：
    private PermissionListener listener; // <- add this attribute

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "native_camera";
    }
}

在項目中添加如下代碼：

// 第1步：
import {View, Button, Image} from 'react-native'
import ImagePicker from 'react-native-image-picker'
var photoOptions = {
  //底部彈出框選項
  title: '請選擇',
  cancelButtonTitle: '取消',
  takePhotoButtonTitle: '拍照',
  chooseFromLibraryButtonTitle: '選擇相冊',
  quality: 0.75,
  allowsEditing: true,
  noData: false,
  storageOptions: {
    skipBackup: true,
    path: 'images'
  }
}

// 第2步：
constructor(props) {
super(props);
    this.state = {
      imgURL: ''
    }
  }

// 第3步：
<Image source={{ uri: this.state.imgURL }} style={{ width: 200, height: 200 }}></Image>
<Button title="拍照" onPress={this.cameraAction}></Button>

// 第4步：
cameraAction = () => {
ImagePicker.showImagePicker(photoOptions, (response) => {
  console.log('response' + response);
  if (response.didCancel) {
    return
  }
  this.setState({
    imgURL: response.uri
  });
})
}

一定要退出之前調試的App，並重新運行react-native run-android進行打包部署；這次打包期間會下載一些jar的包，需要耐心等待！

簽名打包發佈Release版本的apk安裝包

請參考以下兩篇文章：

如何發佈一個apk

先保證自己正確配置了所有的 RN 環境
在 cmd 命令行中，運行這一句話keytool -genkey -v -keystore my-release-key2.keystore -alias my-key-alias2 -keyalg RSA -keysize 2048 -validity 10000

其中： my-release-key.keystore 表示你一會兒要生成的那個簽名文件的名稱【很重要，包找個小本本記下來】
-alias 後面的東西，也很重要，需要找個小本本記下來，這個名稱可以根據自己的需求改動my-key-alias
當運行找個命令的時候，需要輸入一系列的參數，找個口令的密碼，【一定要找個小本本記下來】

當生成了簽名之後，這個簽名，默認保存到了自己的用戶目錄下C:\Users\liulongbin\my-release-key2.keystore
將你的簽名證書copy到 android/app目錄下。
編輯 android -> gradle.properties文件，在最後，添加如下代碼：

MYAPP_RELEASE_STORE_FILE=your keystore filename
MYAPP_RELEASE_KEY_ALIAS=your keystore alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****

編輯 android/app/build.gradle文件添加如下代碼：

...
android {
    ...
    defaultConfig { ... }
    + signingConfigs {
    +    release {
    +        storeFile file(MYAPP_RELEASE_STORE_FILE)
    +        storePassword MYAPP_RELEASE_STORE_PASSWORD
    +        keyAlias MYAPP_RELEASE_KEY_ALIAS
    +        keyPassword MYAPP_RELEASE_KEY_PASSWORD
    +    }
    +}
    buildTypes {
        release {
            ...
    +        signingConfig signingConfigs.release
        }
    }
}
...

進入項目根目錄下的android文件夾，在當前目錄打開終端，然後輸入./gradlew assembleRelease開始發佈APK的Release版；
當發行完畢後，進入自己項目的android\app\build\outputs\apk目錄中，找到app-release.apk，這就是我們發佈完畢之後的完整安裝包；就可以上傳到各大應用商店供用戶使用啦；

注意：請記得妥善地保管好你的密鑰庫文件，不要上傳到版本庫或者其它的地方。

資料

Tab欄插件
https://github.com/happypancake/react-native-tab-navigator
Tab欄使用方式
http://www.jianshu.com/p/7a4899bde137
圖標插件
https://github.com/oblador/react-native-vector-icons
圖標插件使用方式
http://www.jianshu.com/p/2317d8fa3202?from=groupmessage

內容來自網上，記錄學習筆記方便後期查看，如有問題請與我聯繫，謝謝

【第6天】React-學習筆記

React第6天

RN學習說明

配置ReactNative基本開發環境

手機的相關配置

搭建RN的項目

項目結構介紹以及一些注意事項

使用樣式

基本組件的使用介紹

判斷組件是否被卸載

配置Tab欄

配置Tab欄的圖標

案例：豆瓣電影列表

安裝路由

路由的一些基本使用方法

配置首頁的輪播圖

首頁輪播圖片URL地址：

渲染電影列表數據

渲染電影詳情頁面

調用攝像頭拍照

簽名打包發佈Release版本的apk安裝包

如何發佈一個apk

相關文章

資料

【第6天】React-學習筆記

【第5天】移動App-學習筆記

【第4天】移動App-學習筆記

【第3天】移動App-學習筆記

【第2天】移動App-學習筆記

【第1天】移動App-學習筆記

省經緯度數據constants.js

【第1天】移動App-學習筆記

【第5天】移動App-學習筆記

【第4天】移動App-學習筆記

修改node全局安裝路徑和cmd裏改變環境變量

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結