无法让本机Android视图显示在React Native中

我正在尝试将一个简单的TextView从Android的本机代码显示到我的Javascript视图中。 但是,应用程序无声地失败,我只看到默认的“Hello World”

RCTScannerViewManager.java

 public class RCTScannerViewManager extends SimpleViewManager { public static final String REACT_CLASS = "RCTScannerView"; @Override public String getName() { return REACT_CLASS; } @Override protected TextView createViewInstance(ThemedReactContext reactContext) { TextView tv = new TextView(reactContext); tv.setText("hello from android !"); return tv; } } 

RCTScannerViewPackage.java

 public class RCTScannerViewPackage implements ReactPackage { @Override public List createNativeModules(ReactApplicationContext reactContext) { return Collections.emptyList(); } @Override public List<Class> createJSModules() { return Collections.emptyList(); } @Override public List createViewManagers(ReactApplicationContext reactContext) { return Arrays. asList( new RCTScannerViewManager() ); } } 

MainApplication.java

  @Override protected List getPackages() { return Arrays.asList( new MainReactPackage(), new RCTScannerViewPackage() ); } }; 

ScannerView.js

 import React, { Component } from 'react' import { Text, View, requireNativeComponent } from 'react-native' class ScannerView extends Component { render() { return  } } ScannerView.propTypes = { ...View.propTypes } const RCTScannerView = requireNativeComponent('RCTScannerView', ScannerView); export default ScannerView 

index.android.js

 import React, { Component } from 'react' import { AppRegistry, Text, View } from 'react-native'; import ScannerView from './ScannerView'; class AwesomeProject extends Component { render() { return (   Hello world    ); } } AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject) 

我怀疑这会忘记为组件添加布局属性。

根据我的理解,React Native只通过它的自定义Flexbox布局引擎(目前为Yoga)进行布局。 因此,如果您未指定任何弹性框属性,它将不会附加任何本机视图,或者以0宽度/高度/ x / y附加它们。

这篇文章给了我很多帮助,并附带了一个有效的解决方案。

更具体地说,我认为根据这一点应该做的事情:

 import React, { Component } from 'react' import { AppRegistry, Text, View } from 'react-native'; import ScannerView from './ScannerView'; class AwesomeProject extends Component { render() { return (   Hello world    ); } } var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', }, hello: { fontSize: 20, textAlign: 'center', margin: 10 }, scannerview: { height: 100, width: 100, }, }); AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject)