Question

我正在尝试从Android的本机代码中显示一个简单的TextView到我的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附加它们。

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)

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

1 个答案: