将React Native集成到现有应用中时填充不正确

Question

在official docs之后，我们尝试将React Native集成到我们现有的Android应用程序中。

但是，正如您在警告框中看到的那样，输出存在一些填充问题，当我们尝试添加实际代码时，由于每个组件的填充都不正确，输出也会变得更糟：

Android screenshot

代码

index.js

import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';

class HelloWorld extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>Hello, World</Text>
      </View>
    );
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

AppRegistry.registerComponent('MyReactNativeApp', () => HelloWorld);

ReactActivity.java

@Override
protected void onCreate(Bundle savedInstanceState) {

    // ... some unrelated code ..

    mReactRootView = new ReactRootView(this);
    mReactInstanceManager = ReactInstanceManager.builder()
        .setApplication(getApplication())
        .setJSMainModulePath("index")
        .addPackages(Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new RNFirebasePackage(),
            new RNFirebaseMessagingPackage(),
            new RNFirebaseNotificationsPackage(),
            new RNI18nPackage(),
            new VectorIconsPackage(),
            new HJRNPackages()
         ))
        .setUseDeveloperSupport(BuildConfig.DEBUG)
        .setInitialLifecycleState(LifecycleState.RESUMED)
        .build();

    mReactRootView.startReactApplication(mReactInstanceManager, moduleName, initialProperties);

    setContentView(mReactRootView);
}

其他信息

反应： v16.4.1

反应原生： v0.56.0