作一個完整的純react-naitve安卓應用【從環境安裝到應用發佈】

前提：歷來沒有寫過android 跟 ios 應用，是一個小前端。前一段時間玩了一下 react-native 感受還不錯，應用代碼還未開源。 

環境： win7

 

成果：

　　                         

 

 

 

 1、安裝

 

一、SDK安裝

 

提示： 安裝需經過代理，否則會很慢喲~~

安裝 android studio 安裝2.0的版本

 

在studio中安裝如下SDK

 

 

 

添加環境變量（變量值爲sdk路徑）：

 

 

二、全局 react-native 安裝

 

npm install -g react-native-cli

 

三、測試安裝

 

選一個文件夾，在文件夾下面運行

 

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

 

第一行建立一個 react-native 項目，

第三行  android工程中gradle的依賴關係會去先編譯node_modules下RN的代碼，並加入本身的工程中。

這個時候要是沒有彈出打包的彈窗，能夠手動觸發

 

cd AwesomeProject
react-native start

 

打包 react-native 

 

這個時候，能夠看到項目的目錄

 

其中 index.android.js 就是咱們的入口文件

 

咱們能夠在這裏目錄下找到咱們須要用到的apk

 

 

把 apk 在 android 手機上安裝。

 

首次打開app 咱們須要設置熱更新的地址，經過搖一搖手機，把開發菜單搖出來。 點擊 Dev Settings 設置開發

 

 

 Debugging 調試

 

 

手機與電腦須要在同一網絡下，而且填上電腦的地址，端口號默認是8081

 

 

點擊確認以後，咱們就能夠回到頁面上，在開發菜單上點擊 reload 就能夠看到

 

 

首次打包咱們須要稍等一下

 

 

 接下來咱們只須要在這個基礎上修改 index.android.js 這個文件就能夠啦。

 

由於react-native 自己的設計就是ios跟android公用一套代碼，那麼這裏咱們可使用統一的入口文件 main.js

 

四、統一入口文件

 

 文件目錄

 

 

 

main.js

 

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import Nav from './component/Nav';function render() {
    return (
      <Provider>
        <Nav />
      </Provider>
    );
  }

export default render；

 

 index.android.js

 

import { AppRegistry } from 'react-native';
import main from './main';


AppRegistry.registerComponent('AwesomeProject', () => main);

 

2、React-Native 標籤

 

react-native中的標籤跟web頁面的不一樣，全部標籤的第一個字母都爲大寫，跟react 的組件類似、每一個標籤只能作必定的東西，某些標籤必定須要被包裹、某些標籤不能單獨使用，具體能夠看文檔。

使用標籤前須要引入標籤

 

import {
  Text,
  View,
  StyleSheet,
  TouchableHighlight,
  Linking,
  Alert
} from 'react-native';

 

 

3、Reac-Native 樣式

    react-native中的樣式除了一部分特殊樣式以外，大多數樣式爲css中的駝峯式寫法。react-native支持Flexbox佈局

 

一、 樣式與標籤分離的寫法，至關於web頁面中css與標籤分離

 

    樣式：

 

var styles = StyleSheet.create({
  child: {
    paddingVertical: 15,
    marginHorizontal: 10,
    borderColor: '#f6f6f6',
    borderBottomWidth: 1,
    flexDirection: 'row'
  },
  key: {
    paddingHorizontal: 10,
    width: 50,
  },
  name: {
    flex: 5,
    flexDirection: 'row',
    alignItems: 'center',
  }
})

 

    在標籤中的引用：

 

<View style = { styles.child }>
       <Text style = { styles.key }>關鍵</Text>
       <View style ={ styles.name }>
           <Text>react-native</Text>
       </View>
</View>

 

二、直接寫在標籤中

 

<View style = {{flexDirection: 'row'}}>
      <Text style = {{ width: 50, color:'#999' }}>react-native</Text>
</View>

 

 

4、組件

 

子組件：

 

 import React, { Component } from 'react';

 import {

　　Text,

　　View

 } from 'react-native';

 

class Child extends Component {
    render() {
　　　　return (
　　　　　　<View>
　　　　　　　　<Text>{ this.props.name }</Text>
　　　　　　</View>
　　　　)
　　}
}

export default Child;

 

父組件：

 

import React, { Component } from 'react';
import {
　View
 } from 'react-native';
import Child from './Child'; class Father extends Component { render() { 　　　　return ( 　　　　　　<View> 　　　　　　　　<Child name= {'Mickey'}/> 　　　　　　</View> 　　　　) 　　} } export default Fatcher;

 

5、使用 redux 管理數據

 

一、redux 目錄

 

 

 

二、新建action （reducers/preview.js）

 

var previewInitState = {
    previewList: []
};

 

三、新建子reducer （reducers/preview.js）

 

export default function (state = previewInitState, action) {

    switch (action.type) {

        case 'GET_FOLDER': 
            return {...state, previewList: action.previewList};

        default:
            return state;    
    }

}

 

四、合併全部reducer （reducers/index.js）

 

import { combineReducers } from 'redux';
import previewReducer from './preview';var reducers = combineReducers({
    previewReducer: previewReducer
});

export default reducers

 

五、新建store （store/index.js）

 

import { createStore, applyMiddleware,compose } from 'redux';
import thunk from 'redux-thunk';
import reducers from '../reducers'



var store = createStore(
    reducers,
    compose(
        applyMiddleware(thunk)
    )
)

export default store;

 

 這樣子咱們就能夠再react-native中使用 redux 啦

 

六、在入口文件 main.js 中引入 store

 

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import stores from './redux/store';
import Nav from './component/Nav';
const store = stores;

function render() {
    return (
      <Provider store = { store }>
        <Nav />
      </Provider>
    );
  }

store.subscribe(function(){
    render();
});

export default render

 

subscribe 函數爲監聽 store 的變化，當store變化的時候，組件相應地更新

 

 七、在組件中使用store

 

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Child from './Child';
import store from '../redux/store'
import {
  Text,
  ListView,
  StyleSheet
} from 'react-native';


class Father extends Component {

  constructor(props){
    super(props);
    var { previewList } = this.props;
    
    fetch(config.url +'/getAllPreview', {

        method: 'GET'
    })
    .then((response) => { 
        return response.json();// 轉換爲JSON
    })
    .then((data) => {
        store.dispatch({
            type: 'GET_FOLDER',
            previewList: data.previewList
        })
    })
    .catch((error) => {
        console.error(error)
    })
  }  
  render() {
    var { previewList, dispatch } = this.props;
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
        dataSource: ds.cloneWithRows(previewList)
    }
    if (previewList < 1) {
        return (
            <Text></Text>
        )
    }
    return (
        <ListView 
            dataSource = { this.state.dataSource }
            renderRow = {(rowData) => <Child folder = { rowData }/>}
            ></ListView>
    );
  }
}

const mapStateToProps = (state) => {
    return {
        previewList: state.previewReducer.previewList,
    }
}

const mapDispatchToProps = (dispatch, ownProps) => {
    return {}
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Father);

上面代碼中的  store.dispatch 方法爲 把從後臺請求過來的數據跟新到 store 去 。

mapStateToProps 方法 則是把 state 複製到組件的 props 中。

上面使用了 react-native 中的一個 ListView  標籤

 接下來咱們就能夠愉快地編碼了。

 

6、發佈release 版本

 

開發版本的 程序性能跟 發佈版本的會相差比較大，不要由於開發版本性能很差而放棄react-native喲~發佈版本的仍是挺順暢的。

 

一、生成密匙庫

 

    使用命令行生成：

　 在JDK的bin目錄下面打開控制檯，輸入

 

$ keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

　　

接下來要在控制檯上填寫好全部信息等

 

  或者咱們也能夠在 android studio 中生成

打開 android studio，打開任意一個 android 項目 選擇 build 下面的 Generate Signed APK...

 

 

 

 填寫密匙庫生成的路徑、我這裏把密匙庫放在桌面

 

 

 

點擊 create new 填寫好密匙庫的資料。

 

 

 填寫完以後 點擊 ok 再點擊 next，彈出這個 摁 finish 

 

 

完成以後，咱們能夠在桌面上找到密匙庫 meiqi.jks

 

 

 

二、在項目中使用密匙庫

 

把密匙庫放在這個目錄下面

 

 

打開這個文件

 

 

在文件的後面追加咱們所生成的密匙庫的信息

 

android.useDeprecatedNdk=true
MYAPP_RELEASE_STORE_FILE=meiqi.jks
MYAPP_RELEASE_KEY_ALIAS=mickey
MYAPP_RELEASE_STORE_PASSWORD=****** //密匙庫密碼
MYAPP_RELEASE_KEY_PASSWORD=******   //密匙庫密碼

 

打開這個文件

 

 

在文件上面添加

 

...
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
        }
    }
}
...

 

三、發佈 release 的 apk 文件 

 

cd android && ./gradlew assembleRelease

 

這時候咱們就能夠看到 目錄下多出了 兩個release 的apk ，這個時候咱們只須要把apk發送到手機，並安裝就可使用啦。

 

 

可是，這個時候，咱們的應用仍是很醜的綠色安卓圖標，這時候咱們須要把咱們產品的logo放上去，而且修改應用的名稱。

 

7、修改應用名稱、logo

 

一、 修改應用名稱

 

打開文件

 

 

<resources>
    <string name="app_name">應用名稱</string>
</resources>

 

二、 修改應用的logo

 

打開到這個目錄

 

 

只須要把下面的圖片更換成爲咱們須要的logo便可，四個文件夾分別對應四張不一樣大小的圖片

 

一個完整的 純 react-native 的 android 應用就完成啦。

 

轉載請註明出處 http://www.cnblogs.com/Miss-mickey/p/6699535.html