React Native - 初始属性 Android答案

【问题标题】：React Native - initialProperties AndroidReact Native - 初始属性 Android
【发布时间】：2016-03-07 00:39:42
【问题描述】：

我在 React-Native 下工作，我正在寻找通过 Java 将初始道具传递给 JS。这可以在 Objective-C 中使用如下的 initialProperties 轻松完成：

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"myapp"
                                               initialProperties:initialProperties
                                                   launchOptions:launchOptions];

其中 initialProperties 是一个 NSDictionary，它将被转换为 JSON 并通过 this.props 在 JS 中可用。所以我希望在 Android 中做同样的事情。有什么帮助吗？谢谢

【问题讨论】：

标签： javascript android objective-c properties react-native

【解决方案1】：

在 Android 中，您可以将 initialProps 与 launchOptions 作为 Bundle 一起传递。

这里在源代码中提到：https://github.com/facebook/react-native/blob/7377fdcc70b25eb023e7c6d1b37eeae2a700cb88/ReactAndroid/src/main/java/com/facebook/react/ReactRootView.java#L325-L334

所以你可以这样做：

Bundle initialProps = new Bundle();
initialProps.putString("myKey", "myValue");

mReactRootView.startReactApplication(mReactInstanceManager, "MyAwesomeApp", initialProps);

【讨论】：

这很好用。为什么其他答案都在谈论ReactActivityDelegate？
是否可以传入结构化数据，类似于将值的 NSDictionary 传入 iOS 中的 React Native 的方式？还是只能标量值？

【解决方案2】：

更新 react-native > 0.59.0 你需要在 MainActivity.java 中覆盖 ReactActivityDelegate

例子

import android.os.Bundle;
import androidx.annotation.Nullable;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;

public class RNTesterActivity extends ReactActivity {
  public static class RNTesterActivityDelegate extends ReactActivityDelegate {
    public RNTesterActivityDelegate(ReactActivity activity, String mainComponentName) {
      super(activity, mainComponentName);
    }

    @Override
    protected Bundle getLaunchOptions() {
       // YOUR PROPS
       Bundle props = new Bundle();
       props.putString("key1", "string");
       props.putInt("key2", 5);
       return props;
    }
  }

  @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new RNTesterActivityDelegate(this, getMainComponentName());
  }

  @Override
  protected String getMainComponentName() {
    return "RNTesterApp";
  }
}

【讨论】：

【解决方案3】：

这里的所有答案似乎都有些过时了。使用 React-Native 0.42 这对我有用。

在您的 Activity（不是应用程序）类中执行此操作

@Override
protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, "My Cool App") {
        @Nullable
        @Override
        protected Bundle getLaunchOptions() {
            Bundle bundle = new Bundle();
            if( MainActivity.this.port != null ) {
                bundle.putInt("port", MainActivity.this.port);
            }
            return bundle;
        }
    };
}

显然用你想要传递给你的 React Native 组件的 props 的任何东西替换“port”

【讨论】：

这在 react-native v.0.55 中仍然有效吗？我对 Android 开发很陌生，但我没有成功地尝试实现这一点。我添加了您的代码并且项目构建没有任何错误。应用程序按预期运行，但没有传递任何道具...

【解决方案4】：

getlauchOptions 已移到 ReactActivityDelegate 中，现在我使用以下代码：

public class MainActivity extends ReactActivity {

/**
 * Returns the name of the main component registered from JavaScript.
 * This is used to schedule rendering of the component.
 */
@Override
protected String getMainComponentName() {
    return "myAppName";
}

@Override
protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
        @Nullable
        @Override
        protected Bundle getLaunchOptions() {
            Bundle initialProps = new Bundle();
            initialProps.putString("SOME_VARIABLE_1", BuildConfig.SOME_VARIABLE_1);
            initialProps.putString("SOME_VARIABLE_2", "some variable 2 value");
            return initialProps;
        }
    };
}

【讨论】：

太棒了！应该添加您需要在顶部添加 import com.facebook.react.ReactActivityDelegate; 并且默认情况下 @Nullable 在 RN 中不可用。我只是放弃了它，假设这意味着我只需要始终传递一个值。
您可以在回复中添加@ssomnoremac cmets 吗？他们很容易看不见

【解决方案5】：

小心，这在 react-native > 0.34 中已被弃用

https://github.com/facebook/react-native/pull/9320

这是提交信息：

Move `getLaunchOptions` from ReactActivity to ReactActivityDelegate
Summary:
After 3c4fd42, `getLaunchOptions` no longer exists in class `ReactActivity`.
We need refactor UIExplorerActivity to fix the build error.
Closes #9320

Differential Revision: D3696381

Pulled By: astreet

fbshipit-source-id: 5700cf2363029a95cfbdaf6230e4f82ea69fb472
master (#2)  v0.34.0-rc.0

因此，如果您更新您的 react 版本，您将需要更改这部分代码，并且由于您正在覆盖父类中不存在的方法，您可能不会收到任何错误消息，并且它'会很难调试

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
对，我编辑了答案以显示提交消息

【解决方案6】：

从 react-native v0.20 开始，您可以覆盖 MainActivity.java 文件中的 getLaunchOptions 方法。

@Override
protected Bundle getLaunchOptions() {
  Bundle opts = new Bundle();
  opts.putBoolean("someValue", true);
  return opts;
}

这将允许您从主应用组件的道具访问someValue：

class App extends React.Component {
  static propTypes = {
    someValue: PropTypes.bool,
  };

  render() {
    return <SomeComponent someValue={this.props.someValue} />;
  }
}

AppRegistry.registerComponent('App', () => App);

【讨论】：