美文网首页
ReactNative前端与原生事件交互----弹出Androi

ReactNative前端与原生事件交互----弹出Androi

作者: 王大碗要努力 | 来源:发表于2017-08-08 16:56 被阅读0次
    一、点击页面按钮,弹出Android的Toast

    第一步:创建MyNativeModule

    public class MyNativeModule extends ReactContextBaseJavaModule {
        private Context mContext;
        public MyNativeModule(ReactApplicationContext reactContext) {
            super(reactContext);
            mContext = reactContext;
        }
    
        @Override
        public String getName() {
            return "MyNativeModule";
        }
        @ReactMethod
        public void rnCallNative(String msg){
    
            Toast.makeText(mContext,msg,Toast.LENGTH_SHORT).show();
    
        }
    
    }
    

    第二步:创建MyReactPackage

    public class MyReactPackage implements ReactPackage{
        @Override
        public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
            List<NativeModule> modules=new ArrayList<>();
            //将我们创建的类添加进原生模块列表中  
            modules.add(new MyNativeModule(reactContext));
            return modules;
        }
    
        @Override
        public List<Class<? extends JavaScriptModule>> createJSModules() {
            //返回值需要修改  
            return Collections.emptyList();
        }
    
        @Override
        public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
            return Collections.emptyList();
        }
    }
    
    

    第三步:添加包管理文件

     @Override
        protected List<ReactPackage> getPackages() {
          return Arrays.<ReactPackage>asList(
              new MainReactPackage(),
                  new MyReactPackage()
          );
        }
    
    

    第四步:index.android.js中处理

       render() {
            return (
                <View style={styles.container}>
    
                  <Text style={styles.welcome}
                        onPress={this.call_button.bind(this)}
                  >
                    React Native 调用原生方法!
                  </Text>
    
                  <Text style={styles.instructions}>
                    To get started, edit index.android.js
                  </Text>
    
                  <Text style={styles.instructions}>
                    Double tap R on your keyboard to reload,{'\n'}
                    Shake or press menu button for dev menu
                  </Text>
    
                </View>
            );
        }
    
        call_button(){
    
            NativeModules.MyNativeModule.rnCallNative('调用原生方法的Demo');
        }
    

    相关文章

      网友评论

          本文标题:ReactNative前端与原生事件交互----弹出Androi

          本文链接:https://www.haomeiwen.com/subject/awztrxtx.html