無法獲取原生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)