Javascript 无法在React native中显示本机Android视图

我正试图在我的Javascript视图中显示一个简单的

文本视图

。但是，应用程序会无声地失败，我只看到默认的“Hello World”

RCTScannerViewManager.java

public class RCTScannerViewManager extends SimpleViewManager<TextView> {

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

public class RCTScannerViewPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Arrays.<ViewManager> asList(
                new RCTScannerViewManager()
        );
    }
}

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

公共类RCTScannerViewManager扩展了SimpleViewManager{
公共静态最终字符串REACT\u CLASS=“RCTScannerView”；
@凌驾
公共字符串getName（）{
返回一个类；
}
@凌驾
受保护的TextView createViewInstance（主题reactContext reactContext）{
TextView tv=新的TextView（反应上下文）；
tv.setText（“安卓你好！”）；
返回电视；
}
}

RCTScannerViewPackage.java

public class RCTScannerViewManager extends SimpleViewManager<TextView> {

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

public class RCTScannerViewPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Arrays.<ViewManager> asList(
                new RCTScannerViewManager()
        );
    }
}

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

公共类RCTScannerViewPackage实现了ReactPackage{
@凌驾
公共列表createNativeModules（ReactApplicationContext reactContext）{
返回集合。emptyList（）；
}
@凌驾
public List我怀疑这与您忘记为组件添加布局属性有关

据我所知，React Native仅通过其定制的Flexbox布局引擎（目前为Yoga）进行布局。因此，如果您不指定任何Flexbox属性，它将不会附加任何本机视图，或者附加宽度/高度/x/y为0的视图

帮助了我很多，并且有一个有效的解决方案

更具体地说，我认为这样做应该会起到作用：

import React, { Component } from 'react'
import { AppRegistry, Text, View } from 'react-native';
import ScannerView from './ScannerView';

class AwesomeProject extends Component {
  render() {

    return (
        <View style={styles.container}>
            <Text style={styles.hello}> Hello world </Text>
            <ScannerView style={styles.scannerview}></ScannerView>
        </View>
    );
  }
}

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)

import React，{Component}来自“React”
从“react native”导入{AppRegistry，Text，View}；
从“/ScannerView”导入ScannerView；
类AwesomeProject扩展组件{
render（）{
返回(
你好，世界
);
}
}
var styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
},
您好:{
尺寸：20，
textAlign:'中心'，
差额：10
},
scannerview：{
身高：100，
宽度：100，
},
});
AppRegistry.registerComponent（'AwesomeProject'，（）=>AwesomeProject）
成功了，非常感谢！这些样式是否覆盖了
视图中设置的维度。onDraw
？您指的是本机Android布局属性（LayoutParams）？如果是这样，那么是的，您在ViewManager的本机端设置的值将被React本机框架覆盖。正如我所写的，RN使用一个完全独立的布局系统，本机Android LayoutParams与此无关。明白了，非常感谢！我在这方面已经坚持了近一个月，并转到了其他项目ts.你在我被放回RN的那天回答：）