无法让本机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)进行布局.因此,如果您未指定任何弹性框属性,则它将不附加任何本机视图,或者以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 (
        <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)