无法获取原生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布局引擎（目前瑜伽）独享布局。因此，如果您未指定任何Flexbox属性，则它将不附加任何本机视图，或将它们附加到0 width/height/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)