来个React Native学习记录

2020-7-14

state（状态）

1、使用构造函数初始化

constructor(props){
  super(props);
  this.state= {
    text1:'    在iOS上，React Native的ScrollView组件封装的是原生的UIScrollView。\n\
    在Android上，封装的则是原生的ScrollView。\n\
  \
    在iOS上，React Native的Image组件封装的是原生的UIImageView。\n\
    在Android上，封装的则是原生的ImageView。\n\
  \
    React Native封装了这些基础的原生组件，使你在得到媲美原生应用性能的同时，还能受益于React优雅的架构设计。',
    ciunt:0,
  }
}

2、使用setState（{}）修改并重新渲染视图

this.setState({ciunt:++this.state.ciunt})

3、同步异步问题

ocs=()=>{{/*同步方式*/}
  this.setState({text1:'kdow'},
  ()=>Alert.alert('oo',this.state.text1))
}

ocs2=()=>{{/*异步方式*/}
  this.setState({ciunt:++this.state.ciunt})
  Alert.alert('oo',this.state.text1)
}

bind(this)

将函数中的this替换为指定对象并返回替换后的函数。

||和&&在js中的效果

这些内容将会被视为false处理："" , false , 0 , null , undefined , NaN

||：当第一个不视为false时返回第一个；否则第二个不视为false时返回第二个；否则返回false
&&：当两者都视为true时返回第二个，否则false

变量提升

变量提升&函数提升

RN-Native相互调用

本例使用静态内部类方式

public class MyReactNativePackage implements com.facebook.react.ReactPackage {
    @NonNull
    @Override
    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
        MyNativeModule myNativeModule = new MyNativeModule(reactContext);
        List<NativeModule> modules = new ArrayList<>();
        //将我们创建NativeModule添加进原生模块列表中
        modules.add(myNativeModule);
        return modules;
    }

    @NonNull
    @Override
    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
        //该处后期RN调用原生控件或自定义组件时可用到
        return Collections.emptyList();
    }

    static class MyNativeModule extends ReactContextBaseJavaModule {
        public static final String REACT_NATIVE_CLASSNAME = "MyNativeModule";
        private final ReactApplicationContext context;

        public MyNativeModule(ReactApplicationContext reactContext) {
            super(reactContext);
            this.context = reactContext;
        }

        @NonNull
        @Override
        public String getName() {
            return REACT_NATIVE_CLASSNAME;
        }

        @ReactMethod
        public void rncall(String msg) {
            Toast.makeText(context, msg, Toast.LENGTH_SHORT).show();
        }

        @NonNull
        @Override
        public Map<String, Object> getConstants() {
            Map<String, Object> params = new HashMap<>();
            params.put("Constant", "我是Native常量，传递给RN");
            return params;
        }
    }
}

在MainApplication.java中

@Override
protected List<ReactPackage> getPackages() {
	@SuppressWarnings("UnnecessaryLocalVariable")
	List<ReactPackage> packages = new PackageList(this).getPackages();
	// Packages that cannot be autolinked yet can be added manually here, for example:
	packages.add(new MyReactNativePackage());
	return packages;
}

RN方面调用如下：

call_button() {
    // NativeModules.MyNativeModule.
    NativeModules.MyNativeModule.rncall('调用原生方法操作');
  }

useState、useEffect、useReducer、useRef的理解

useState：

创建一个状态并返回一个只读变量和一个设置函数

useEffect：

主要实现组件生命周期函数组合，参数（1、一个render后调用的函数，可以带一个返回函数：当组件销毁时调用；2、不存在第二参数时，监听全部状态，空数组时，只在conponentDidMount时调用，数组不为空时同理。）

useReducer：

复杂的状态管理过程，

const [count, dispatch] = useReducer((state,action)=> {
        if(action === 'add'){//action可以为对象、state代指状态count
            return state + 1;
        }
        return state;
    }, 0);//第二个参数为初始化状态为0

此方法和useState比较：也创建一个状态并返回一个只读变量和一个复杂的设置函数，调度示例：dispatch('add')

useRef：

无参初始化，使用时在组件DOM节点中以ref属性设置

<input ref={inputRef}/>

使用示例：var str=inputRef.current.value
附一个学习链接
Android原生与RN如何交互通信

坑

注意()=>{}和function(){}差别：this关键字是关键。

call_button() {
    // NativeModules.MyNativeModule.
    NativeModules.MyNativeModule.rncall('调用原生方法操作');
  }
  ocs = () => {
    this.setState({ text1: 'kdow' },
      () => Alert.alert('oo', this.state.text1))

  }