React Native - initialProperties Android

问题:

I'm working under React-Native and I'm looking for passing initial props to JS via Java. This can be done easily in Objective-C with initialProperties like this :

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

Where initialProperties is an NSDictionary which will be converted in JSON and available in JS via this.props. So I'm looking to do the same in Android. Any help ? Thanks

回答1:

In Android, you can pass initialProps in with the launchOptions as a Bundle.

As is mentioned here in the source code: https://github.com/facebook/react-native/blob/7377fdcc70b25eb023e7c6d1b37eeae2a700cb88/ReactAndroid/src/main/java/com/facebook/react/ReactRootView.java#L325-L334

So you can do something like this:

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

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

回答2:

getlauchOptions has been moved inside ReactActivityDelegate, now I use this code:

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;
        }
    };
}

回答3:

Be careful, this is deprecated in react-native > 0.34

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

this is the commit message :

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 

Thus you'll need to change this part of your code if you update your version of react, and since you're overriding a method which will not exist in the parent class you might not get into any error message and it'll be hard to debug

回答4:

All the answers here seemed a bit out of date. With React-Native 0.42 this worked for me.

In your Activity (not Application) class do this

@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;
        }
    };
}

Obviously replace "port" with whatever you want to pass to the props of your main React Native Component

回答5:

As of react-native v0.20, you can override the getLaunchOptions method in the MainActivity.java file.

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

This will allow you to access someValue from your main app component's props:

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

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

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

回答6:

update for react-native > 0.59.0 you need override ReactActivityDelegate in your MainActivity.java

Example

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";
  }
}