React-Native Android int 值的模块返回晚了？

Question

我有一个原生 Android 应用程序，现在有一个 React-Native 部分。

简而言之，我在原生 Android/Java 中有一个列表视图。当我点击一行时，我开始一个新的 Activity，它导致 React-Native 代码。

组件进行 API 调用，但在调用之前，我的代码通过 React Native 模块从 Java/Android 设置中的用户首选项中获取值 header 以便它可以进行正确的 API 调用。

React Native API 调用 /actions/index.js:

export const toggleBlocked = (user_id) =>
async dispatch => {
  try {
    let headers = await getHeaders();
    const response = await fetch('http://my.domain.com/api/get_data?user_id=`${user_id}`', { headers, method: 'GET' });
    if (response.status == 200) {
      // do stuff
    } else {            
      ToastAndroid.show("Looks like the response wasnt good :(", ToastAndroid.LONG, ToastAndroid.CENTER);
    }
  } catch (error) {
    ToastAndroid.show("An Error Occurred :(", ToastAndroid.LONG, ToastAndroid.CENTER);
  }
};


function getHeaders() {
  let userId = UserService.getUserId()
  console.log("2. React-Native | getHeaders... user_id is " + userId)
  return (
    new Headers({
      Cookie: `abcxyz=${userId}`,
      user_id: userId,
      "User-Agent": "android",
      "Content-Type": "application/json",
      charset: "utf-8",
      "app-version": "9.1.23",
      Accept: "application/json"
    })
  )
}

回到原生 Android/Java，我已经设置了我的模块和包。这里是 UserServiceModule.java:

    @ReactMethod
    public int getUserId() {
        SharedPreferences settings = mContext.getSharedPreferences(Constants.SettingsPreference, Context.MODE_PRIVATE);
        int userId = settings.getUserId();
        Log.d(TAG, "1. Java/Android code. UserID is " + userId);
        return userId;
    }

当我运行代码时，user_id总是空的。我什至希望我的日志按顺序显示（请参阅编号的日志），但它们是相反的？？

"1. Java/Android code. UserID is 123"
"2. React-Native | getHeaders... user_id is 123"

请提供任何见解。谢谢。

更新/解决方案 这是使事情正常工作的更新更改：

@ReactMethod
public void getUserId(final Promise promise) {
    SharedPreferences settings = mContext.getSharedPreferences(Constants.SettingsPreference, Context.MODE_PRIVATE);
    int userId = settings.getUserId();
    Log.d(TAG, "1. Java/Android code. UserID is " + userId);

    promise.resolve(Integer.toString(userId));
}

Answer 1

@ReactMethod 函数总是假设 return 无效并且是异步的。你得到 null 的原因是因为你的 JS 代码是同步编写的。它将变量 userId 初始化为 null 并将其设置为异步调用的 return 值。但是因为你写的代码是同步的，它会在 react 方法返回值之前转到下一行。

您需要像使用分派方法一样执行异步等待。然而，这还不够，因为 React 方法 return 是一个空值。坦率地说，我不知道如何不触发未找到方法错误。也许@ReactMethod 会忽略您在 Java?

中定义的 return 值

无论如何，在设置异步等待之后。做一些类似于他们在这里所做的事情： https://facebook.github.io/react-native/docs/native-modules-android.html#callbacks

Answer 2

在@ReactMethod

中设置isBlockingSynchronousMethod = true

示例：

@ReactMethod(isBlockingSynchronousMethod = true)
public String getString(){
    return "awesome string";
}

在js文件中：

var someString = await NativeModule.ModuleName.getString();

React-Native Android int 值的模块返回晚了？

React-Native modules for Android int value returned late?

javascript

java

android

react-native

react-native-android