react-native学习笔记摘要

1.react-native 创建一个指定版本的项目:

    react-native init demo4 --version 0.46.0 

或者

    react-native init demo --verbose --version 0.46.0      //    --verbose 意思为显示安装详情

2.react-native 下载指定版本插件,cd 到项目根目录（和package.json同级）

    npm install react-native-dropdownalert@2.11.0 --save  

    //    react-native-dropdownalert为插件名  

    //    @2.11.0意思为选择2.11.0版本      

    //    --save参数意思为讲该配置添加到package.json中的 

3.关于 super(props)

调用super的原因：在ES6中，在子类的constructor中必须先调用super才能引用this

4.注意es6新语法 以及javascript常用的基础语法

split(separator): 方法创建一个新数组，将字符串通过separator进行分割，生成数组。作用于字符串返回数组 

map(function(a){ return '返回的是对'+a+'进行处理后的结果'}): 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。作用于数组返回新数组 

                            注意 map()中传入一个函数对数组中的每一个元素进行处理并返回

                            或者可以这样写 map((a)=>a+'a被处理了')    箭头函数

join(separator):方法用于把数组中的所有元素放入一个字符串。 元素是通过指定的分隔符separator进行分隔的  。作用于数组返回字符串  

var testString = 'abcdefg';

testString.split(' ').map((word) => word && 'z').join(' ');

5.react-native 页面跳转传值 

6.app.js

7

import React, { Component } from 'react';
import { AppRegistry, Button,Text, View } from 'react-native';

import {StackNavigator} from "react-navigation";
import MainScreen from './View/MainScreen';
import ProfileScreen from './View/ProfileScreen'
class app extends Component {
constructor(props) {
super(props);
};
render() {
var LoginView = MainScreen;
var LoginComponent = ProfileScreen;
// var LoginComponent=HomePage;
return (
<View style={{width: 100, height:100}}>
{/*<Navigator*/}
{/*initialRoute={{name: LoginView, component: LoginComponent, statusBarHidden: true}}*/}
{/*configurScene={(route)=> {*/}
{/*return Navigator.ScenceConfigs.FloatFromRight;*/}
{/*}}*/}
{/*renderScene={(route, navigator)=> {*/}
{/*let Component = route.component;*/}
{/*return <Component {...route.params} navigator={navigator}/>*/}
{/*}}*/}
{/*/>*/}
</View>
);
}
}

const App = StackNavigator({

Main: {
screen:MainScreen  
},
Profile: {
screen: ProfileScreen
},

});
module.exports = App;

8.index.android.js

9

'use strict';

import React, { Component } from 'react';
import { AppRegistry} from 'react-native';
import app from './app';
// var connectSocketServer = require('./WsSupport/webConnection');
// connectSocketServer.initWs();
AppRegistry.registerComponent('demo4', () => app);

MainScreen.js中：

10

import React, { Component } from 'react';
import { AppRegistry, Button,StyleSheet, Text, View } from 'react-native';

import ProfileScreen from './ProfileScreen'



class MainScreen extends React.Component {
constructor(props) {
super(props);

var testState = this.setState;
console.log(testState);

};
static navigationOptions = {
title: '首页MainScreen',
};
render() {
const { navigate } = this.props.navigation;
return (
<Button
title={this.props.navigation.state.params==undefined?'首页按钮':this.props.navigation.state.params.name}
onPress={() =>
navigate('Profile', { name: 'Jane' })
}
/>
);
}
}
export default MainScreen

11.ProfileScreen.js中：

import React, { Component } from 'react';
import { AppRegistry, Button,StyleSheet, Text, View } from 'react-native';

import MainScreen from './MainScreen'




class ProfileScreen extends React.Component {
constructor(props) {
super(props);

};
static navigationOptions = {
title: 'ProfileScreen详情页',
};
render() {
const { navigate } = this.props.navigation;
return (
<Button
title={this.props.navigation.state.params.name}
onPress={() =>
navigate('Main', { name: 'jimmy' })
}
/>
);
}
}


export default ProfileScreen

12.NDK 环境变量

添加新环境变量 ANDROID_NDK_HOME   E:\Android\sdk\ndk-bundle

path 中添加 ;%ANDROID_NDK_HOME% 

13.react-native link  RN项目中使用到原生功能的时候 向java和Java配置项中添加相关配置  具体使用可参考node_modules中的ReadMe文档