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


你可能感兴趣的:(React,Native)