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

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

環境： win7

 

成果：

　　                         

 

 

 

 一、安裝

 

1、SDK安裝

 

提示： 安裝需通過代理，不然會很慢喲~~

安裝 android studio 安裝2.0的版本

 

在studio中安裝以下SDK

 

 

 

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

 

 

2、全局 react-native 安裝

 

npm install -g react-native-cli

 

3、測試安裝

 

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

 

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

 

4、統一入口文件

 

 文件目錄

 

 

 

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);

 

二、React-Native 標簽

 

react-native中的標簽跟web頁面的不同，所有標簽的第一個字母都為大寫，跟react 的組件相似、每個標簽只能做一定的東西，某些標簽一定需要被包裹、某些標簽不能單獨使用，具體可以看文檔。

使用標簽前需要引入標簽

 

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

 

 

三、Reac-Native 樣式

    react-native中的樣式除了一部分特殊樣式之外，大多數樣式為css中的駝峰式寫法。react-native支持Flexbox布局

 

1、 樣式與標簽分離的寫法，相當於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>

 

2、直接寫在標簽中

 

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

 

 

四、組件

 

子組件：

 

 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;

 

五、使用 redux 管理數據

 

1、redux 目錄

 

 

 

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

 

var previewInitState = {
    previewList: []
};

 

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

 

export default function (state = previewInitState, action) {

    switch (action.type) {

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

        default:
            return state;    
    }

}

 

4、合並所有reducer （reducers/index.js）

 

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

export default reducers

 

5、新建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 啦

 

6、在入口文件 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變化的時候，組件相應地更新

 

 7、在組件中使用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  標簽

 接下來我們就可以愉快地編碼了。

 

六、發布release 版本

 

開發版本的 程序性能跟 發布版本的會相差比較大，不要因為開發版本性能不好而放棄react-native喲~發布版本的還是挺順暢的。

 

1、生成密匙庫

 

    使用命令行生成：

　 在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

 

 

 

2、在項目中使用密匙庫

 

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

 

 

打開這個文件

 

 

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

 

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

 

3、發布 release 的 apk 文件 

 

cd android && ./gradlew assembleRelease

 

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

 

 

但是，這個時候，我們的應用還是很丑的綠色安卓圖標，這時候我們需要把我們產品的logo放上去，並且修改應用的名稱。

 

七、修改應用名稱、logo

 

1、 修改應用名稱

 

打開文件

 

 

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

 

2、 修改應用的logo

 

打開到這個目錄

 

 

只需要把下面的圖片更換成為我們需要的logo即可，四個文件夾分別對應四張不同大小的圖片

 

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

 

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