React Native学习笔记

知识点：

1.// 用ListView实现类似Android中GridView的布局效果
contentContainerStyle={{flexDirection:"row",flexWrap:"wrap"}}


2.//删除数据组中的元素，index代表开始位置，1代表删除的个数。
data.splice(index, 1);


3.// 返回上一级页面
this.props.navigation.goBack();


4.// 跳转到DynamicS页面
this.props.navigation.navigate("DynamicS");


5.// 从当前页面跳转到PasscodeS页面,栈中的所有页面都会销毁掉。
const resetAction = NavigationActions.reset({
                index: 0,
                actions: [
                    NavigationActions.navigate({routeName: 'PasscodeS'})
                ]
            })
            this.props.navigation.dispatch(resetAction)


6.//设置值
try {
        AsyncStorage.setItem(
            key,
            value,
            (error) => {
                 if (error) {
                     // alert('存值失败:', error);
                 } else {
                     // alert('存值成功!');
                 }
            });
     } catch (error) {
         // alert('失败' + error);
     }


7.取值
AsyncStorage.getItem(
            key,
            (error, result) => {
                console.log('取值:' + result);


                if (error) {
                } else {
                    var data = JSON.parse(result);


                    if (data.data != "") {


                        data.data.managerlist[data.data.managerlist.length] = "999";
                        console.log('取值:2' + JSON.stringify(data.data.managerlist));
                        this.setState({
                            rooms: ds.cloneWithRows(['Living Room', 'Bed room', 


'Dining']),
                            familymembers: ds.cloneWithRows(data.data.managerlist),
                        });
                    } else {
                        this.setState({
                            rooms: ds.cloneWithRows(['Living Room', 'Bed room', 


'Dining']),
                            familymembers: ds.cloneWithRows(["999"]),
                        });
                    }
                }
            }
        );


8.Date APIs
Date 对象用于处理日期和时间。其核心的方法如下列表所示:
方法 描述
Date() 返回当日的日期和时间。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getFullYear() 从 Date 对象以四位数字返回年份。
getYear() 请使用 getFullYear() 方法代替。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate() 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay() 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCMonth() 根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCFullYear() 根据世界时从 Date 对象返回四位数的年份。
getUTCHours() 根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMinutes() 根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCSeconds() 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getUTCMilliseconds() 根据世界时返回 Date 对象的毫秒(0 ~ 999)。
parse() 返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth() 设置 Date 对象中月份 (0 ~ 11)。
setFullYear() 设置 Date 对象中的年份（四位数字）。
setYear() 请使用 setFullYear() 方法代替。
setHours() 设置 Date 对象中的小时 (0 ~ 23)。
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。
setTime() 以毫秒设置 Date 对象。
setUTCDate() 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCMonth() 根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCFullYear() 根据世界时设置 Date 对象中的年份（四位数字）。
setUTCHours() 根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMinutes() 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCSeconds() 根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。
setUTCMilliseconds() 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
toSource() 返回该对象的源代码。
toString() 把 Date 对象转换为字符串。
toTimeString() 把 Date 对象的时间部分转换为字符串。
toDateString() 把 Date 对象的日期部分转换为字符串。
toGMTString() 请使用 toUTCString() 方法代替。
toUTCString() 根据世界时，把 Date 对象转换为字符串。
toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。
toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串。
UTC() 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
valueOf() 返回 Date 对象的原始值。


9.js中对小数保留两位小数，number.toFixed(2) 这个方法是四舍五入的;
  js中取整，parseInt(number);
  js中四舍五入取整，Math.round(number);
  js中向上取整，Math.ceil(number);
  js中向下取整，Math.floor(number);


10.代理服务器：Chrome->高级设置->【网络--更改代理服务器设置】->【连接--局域网设置】->里面


有一个复选框，
选中的话可以使用代理；不选中是不使用代理。




11.Web服务器端编程语言有ASP, ASP.NET, JSP, PHP, Python等等;
   App服务器端编程语言有C/C++, C#, Java, Python等等。




12.JS->Android原生模块->startActivity。
   用到了EventBus框架(
        EventBus.getDefault().register(this);
        EventBus.getDefault().unregister(this);
        EventBus.getDefault().post(new MessageEvent());
        @Subscribe(threadMode = ThreadMode.MAIN)  
        public void onMessageEvent(MessageEvent event) {/* Do something */};
   )主要是方便。


   (1)首先创建一个原生模块，一个原生模块是一个继承了ReactContextBaseJavaModule的Java类，


并且实现getName方法，
   这个函数用于返回一个字符串名字，这个名字在JavaScript端标记这个模块。
public class GoToActivity extends ReactContextBaseJavaModule
{


    private static final String DURATION_SHORT_KEY = "SHORT";
    private static final String DURATION_LONG_KEY = "LONG";


    public GoToActivity(ReactApplicationContext reactContext)
    {
        super(reactContext);
    }


    /**
     * getName方法。这个函数用于返回一个字符串名字,就是js中的模块名
     */
    @Override
    public String getName()
    {
        return "GoToActivity";
    }


    /**
     * 返回了需要导出给JavaScript使用的常量
     */
    @Override
    public Map getConstants()
    {
        final Map constants = new HashMap<>();
        constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
        constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
        return constants;
    }


    /**
     * 导出给js使用的方法，需要使用注解@ReactMethod。方法的返回类型必须为void
     */
    @ReactMethod
    public void show(String message, int duration)
    {
        Toast.makeText(getReactApplicationContext(), message, duration).show();
        EventBus.getDefault().post(message);
    }
}
  （2）在Java这边要做的最后一件事就是注册这个模块。我们需要在应用的Package类的


createNativeModules方法中添加这个模块。
  如果模块没有被注册，它也无法在JavaScript中被访问到。public class MyReactPackage 


implements ReactPackage {


  @Override
  public List createNativeModules(
                              ReactApplicationContext reactContext) {
    List modules = new ArrayList<>();


    modules.add(new GoToActivity(reactContext));
    modules.add(new ImagePickerModule(reactContext));


    return modules;
  }


    @Override
    public List> createJSModules() {
        // TODO Auto-generated method stub
        return Collections.emptyList();
    }


    @Override
    public List createViewManagers(ReactApplicationContext reactContext) {
        // TODO Auto-generated method stub
        return Collections.emptyList();
    }


}这个package需要在MainApplication.java文件的getPackages方法中提供。这个文件位于你的


react-native应用文件夹的android目录中。
具体路径是: android/app/src/main/java/com/your-app-name/MainApplication.java.


@Override
    protected List getPackages() {
      return Arrays.asList(
          new MainReactPackage(),
          new MyReactPackage() // 添加这个包
      );
    }
(3)在ReactNative项目中调用 (为了让你的功能从JavaScript端访问起来更为方便，通常我们都会把


原生模块封装成一个JavaScript模块。
这不是必须的，但省下了每次都从NativeModules中获取对应模块的步骤。这个JS文件也可以用于添加


一些其他JavaScript端实现的功能。
//定义一个GoToActivity.js文件
'use strict';
import {
    NativeModules
} from 'react-native';
export default NativeModules.GoToActivity;)。


//然后就可以直接调用GoToActivity这个自己写的模块里的方法了。
GoToActivity.show('调用系统的Toast', ToastAndroid.SHORT);




13.Android原生UI组件：
提供原生视图很简单：
创建一个ViewManager的子类。
实现createViewInstance方法。
导出视图的属性设置器：使用@ReactProp（或@ReactPropGroup）注解。
把这个视图管理类注册到应用程序包的createViewManagers里。
实现JavaScript模块。




14.腾讯云直播SDK：
   SDK相关的库(jar/so)放在app/src/main/jniLibs目录下，jniLibs目录为android studio默认的


so加载目录，
   推荐在集成SDK时按照demo的做法，将so和jar拷贝入您的工程的src/main/jniLibs目录下。


15.示例代码（Android）,如何处理进度通知,
下面这段代码用来展示如何处理 RTMP SDK 点播播放器的播放进度通知：
public class MyTestActivity implements ITXLivePlayListener{


@Override
public void onPlayEvent(int event, Bundle param) {
    // RTMP SDK Demo 的源码中，视频画面卡住时，会在其上绘制一个半透明的loading动画。
        // 这里的 stopLoadingAnimation 是将loading动画停止掉。
    if (event == TXLiveConstants.PLAY_EVT_PLAY_BEGIN) {
        stopLoadingAnimation();
    }
    // 如下这段代码是处理播放进度
    else if (event == TXLiveConstants.PLAY_EVT_PLAY_PROGRESS) {
        int progress = param.getInt(TXLiveConstants.EVT_PLAY_PROGRESS); //进度（秒数）
        int duration = param.getInt(TXLiveConstants.EVT_PLAY_DURATION); //时间（秒数）


        // UI进度进行相应的调整
        mSeekBar.setProgress(progress);
        mTextStart.setText(String.format("%2d:%2d",progress/60,progress%60));
        mTextDuration.setText(String.format("%2d:%2d",duration/60,duration%60));
        mSeekBar.setMax(duration);
        return;
    }
    // 如下这段代码是处理播放结束的事件
    else if (event == TXLiveConstants.PLAY_ERR_NET_DISCONNECT
                 || event == TXLiveConstants.PLAY_EVT_PLAY_END) {
        stopPlayRtmp();
        mVideoPlay = false;
    }
}
mLivePlayer.setPlayListener(this);


16.React Native -- ActivityIndicator (Displays a circular loading indicator.)


17.React Native -- DrawerLayoutAndroid (抽屉布局，仅Android端使用)


18.React Native 常用命令：
   react-native init 项目名称          //创建项目
   react-native run-android            //安装创建的项目，在Android平台上,对第一次运行。
   react-native start                  //启动项目，对已经安装好的项目。
   npm install --save react-navigation //安装React Navigation




19.React Native真机调试，打开菜单-->Dev Settings-->Debug server host & port for device
-->输入电脑的ip地址加端口号8081，例如：192.168.7.67:8081




20.React Native 网络请求：//当前时间
        var nowTime = (new Date()).valueOf();
        var DoorlockHistory = {
            "uid": myglobal.uid,
            "devicesid": myglobal.devicesid,
            "querytime": {
                time: nowTime + "",
                queryName: "DoorlockHistory",
            },
        };
        NativeModules.QueryInternetModule.NativeMethod(JSON.stringify(DoorlockHistory), 


myglobal.channel);




21.React Navigation -- StackNavigator:
   API Definition--StackNavigator(RouteConfigs, StackNavigatorConfig);
RouteConfigs--StackNavigator({

  // For each screen that you can navigate to, create a new entry like this:
  Profile: {

    // `ProfileScreen` is a React component that will be the main content of the 

screen.
    screen: ProfileScreen,
    // When `ProfileScreen` is loaded by the StackNavigator, it will be given a 

`navigation` prop.

    // Optional: When deep linking or using react-navigation in a web app, this path is 

used:
    path: 'people/:username',
    // The action and route params are extracted from the path.

    // Optional: Override the `navigationOptions` for the screen
    navigationOptions: ({navigation}) => ({
      title: `${navigation.state.params.username}'s Profile'`,
    }),
  },

  ...MyOtherRoutes,
});


StackNavigatorConfig--
  initialRouteName:默认路由，就是第一个要显示的页面。
  initialRouteParams；
  navigationOptions:对所有的screen的默认配置。
  paths：对所有路由的path属性的默认配置。
  mode：定义渲染风格，enum（card(IOS、Android都可以)、modal（仅IOS））。
  headerMode：enum（float、screen、none）。
  cardStyle：Use this prop to override or extend the default style for an individual 

card in stack.
  transitionConfig：Function to return an object that overrides default screen 

transitions.
  onTransitionStart：Function to be invoked when the card transition animation is about 

to start.
  onTransitionEnd：Function to be invoked once the card transition animation completes.
  

Screen Navigation Options:
  title: Generic title that can be used as a fallback for headerTitle and tabBarLabel。
  headerRight：React Element to display on the right side of the header。
  header
  headerTitle
  headerBackTitle：Title string used by the back button on iOS or null to disable 

label. Defaults to scene title。
  headerTruncatedBackTitle
  headerLeft
  headerStyle
  headerTitleStyle
  headerBackTitleStyle
  headerTintColor
  headerPressColorAndroid：Color for material ripple (Android >= 5.0 only)
  gesturesEnabled


Navigator Props：
  const SomeStack = StackNavigator({
    // config
  });
      screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}

  />

22.React Navigation:
  NavigationActions中的back方法的用法，举例：栈中有A/B/C/D四个页面，栈顶是D，从D直接跳转到A，
  那么需要在B加载的时候就记下B的key，通过this.props.navigation.state.key得到，记录在一个全局变量中,
  然后this.props.navigation.dispatch(NavigationActions.back({key: '记录在全局变量中的那个key'}));