无法让原生 Android 视图显示在 React Native 中

Question

我试图让一个简单的TextView 从 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;
    }
}

RCTScannerViewPackage.java

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

MainApplication.java

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>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 <RCTScannerView />
    }
}

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 (
        <View>
            <Text> Hello world </Text>
            <ScannerView></ScannerView>
        </View>
    );
  }
}

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject)

Answer 1

我怀疑这与您忘记为组件添加布局属性有关。

据我了解，React Native 仅通过其自定义的 Flexbox 布局引擎（目前为 Yoga）进行布局。所以如果你不指定任何 flexbox 属性，它要么不附加任何原生视图，要么附加 0 宽度/高度/x/y。

This article 帮助了我很多，the attached repo 提供了一个可行的解决方案。

更具体地说，我认为类似这样的东西应该可以解决问题：

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)