Question

我想从本地android Main Activity类传递一个字符串值来响应本地组件。我应用了此代码，但是一旦我在日志中打印“数据”，它就会显示未定义。我无法理解问题所在。我是React Native的初学者。预先感谢。

在主要活动中：

@Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
            @Override
            protected Bundle getLaunchOptions() {

                Bundle initialProperties = new Bundle();
                initialProperties.putString("var_1","Im the first var");
                return initialProperties;
            }
        };
    }

在App.js中：

export default class App extends Component<Props> {

  render() {
    var data = this.props.var_1;
    console.log(data);
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.welcome}>{this.props.var_1}</Text> 
      </View>
    );
  }
}

Answer 1

有几种方法：

您可以通过从android活动中发出事件来发送它，并在您的react组件中处理该事件。

    //Emitting the event from Android Activity.

    public class MainActivity extends ReactActivity {

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);

            WritableMap map = Arguments.createMap();
            map.putString("key1", "Value1");
            map.putString("key1", "Value1");

        try {
           getReactInstanceManager().getCurrentReactContext()   
          .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
          .emit("customEventName", map);

            } catch (Exception e){
              Log.e("ReactNative", "Caught Exception: " + e.getMessage());
            }
        }

然后在react组件中，addEventListner（subscribe）对该事件进行如下处理：

import { DeviceEventEmitter } from 'react-native';

componentWillMount: function() {
  DeviceEventEmitter.addListener('customEventName', function(e: Event) {
    // handle event and you will get a value in event object, you can log it here
  });
}

另一种方法是：

您可以将该字符串存储在SharedPreferences中，并可以从React-native组件访问相同的值。请参阅以下链接，了解共享首选项的使用： https://github.com/sriraman/react-native-shared-preferences

Answer 2

React Native / Native Modules（Android）文档中突出显示了另一个选项。

是回调！

您可以在客户端（js）代码中将回调作为函数传递，并在Java模块中使用要返回的数据调用它。

您需要在Java类中导入Callback桥模块：

import com.facebook.react.bridge.Callback;

然后您的方法声明：

public class YourModule extends ReactContextBaseJavaModule {

...

  @ReactMethod
  public void customMethod(int param, Callback callback) {
    try {
      // do something 
      callback.invoke("Your data"); // Invoke the callback here
    } catch (Exception e) {
      // exception code here
    }
  }

...

然后在您的Java代码中，您可以调用回调

现在您可以像这样通过js代码传递回调：

YourModule.customMethod(1, (data) => {})

Answer 3

official documentation 有几种方法可以做到这一点。

与您使用的代码类似的是覆盖 ReactActivityDelegate。

确保包含相关的导入。我没有使用 Android Studio 并且它不是自动完成的，这导致了一些错误。

将这些导入添加到 android/app/src/main/java/APPNAME/MainActivity.java：

import com.facebook.react.ReactActivityDelegate;
import android.os.Bundle;
import java.util.ArrayList;
import java.util.Arrays;

然后在MainActivity类的body中添加override方法：

  @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
      @Override
      protected Bundle getLaunchOptions() {
        Bundle initialProperties = new Bundle();
        ArrayList<String> imageList = new ArrayList<String>(Arrays.asList(
                "http://example.com/bar1.png",
                "http://example.com/bar2.png"
        ));
        initialProperties.putStringArrayList("images", imageList);
        return initialProperties;
      }
    };
  }

然后在您的 App.js 中您可以访问 props.images（图像属性是通过 MainAcitivity 添加的。您可以随意命名）。

此示例使用功能组件。您可以在链接的文档中查看基于类的示例。

import React from 'react';
function App(props) {
    console.log('APP PROPS', props.images);
}

如何从本地android传递数据以响应本地？

3 个答案: