ネイティブAndroidビューをReact Nativeに表示することができません

Question

簡単なTextViewをAndroidのネイティブコードからJavascriptビューに表示しようとしています。ただし、アプリケーションは静かに失敗し、私は、デフォルトの "Hello World"

RCTScannerViewManager.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

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を見ます

@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レイアウトエンジン（現在のヨガ）を介して排他的にレイアウトしています。したがって、フレックスボックス属性を指定しない場合、ネイティブビューを添付したり、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)