react-native下引入原生組件沒法顯示的緣由

導入原生組件到RN應該注意的問題

不是全部的元生組件均可以導入RN的，有的要支持自動佈局的導入才能成功， 好比一個 原生btn你設置他的位置 長寬就能顯示了, 可是若是這個btn裏面有不少子view, 這些子view 要在 layoutSubView這個oc 回調函數裏面從新佈局下位置 或者這些子view都是autolayout佈局的；

引用原生組件在RN中如何控制位置？

前面ios那邊寫了個原生的音樂播放組件給我調用，可是一個比較坑的問題是用RN渲染出來樣式佈局全亂了，並且亂得還沒規律，組件內的一些功能也沒法使用。後面看到一篇文章點這裏查看，裏面有一段話引發了個人注意

咱們能夠看到它的頁面有不少層次，中間還有一個對焦框。其實咱們只關心最外面的一層，最終應用開發者使用最外面一層的 View 便可，對裏面的視圖並不關心。在 Android 中咱們通常會用 XML Layout 去佈局，可是在設計一個 API 的時候，給用戶不少種方式顯然是不太合適的。當你給了用戶一個 XML，而後說用咱們的 API 的時候，在 Android 裏面還要再去改 XML，若是對方是一個 Web 開發者，它經過 React Native 技術進入了移動開發領域，看到這個 XML 以後會感受很慌，由於並不知道這個是什麼。同理，iOS 裏面也是同樣的，裏面可能會要用到 Auto Layout。這些都是不太推薦的。因此在 Android 裏面，咱們是直接用代碼進行佈局，它的核心界面結構並非太複雜。iOS 裏面也是直接保持了最外層的 View 和裏面的 View 大小一致。但最終開發者使用的，都是用 Flex Box 來佈局。

上面這段話裏面說的iOS 裏面也是直接保持了最外層的 View 和裏面的 View 大小一致，經過實踐發現，這個意思是說前端這邊設置的視圖大小應該與原生那邊設置的視圖大小保持一致，果真這樣設置後組件就能正常顯示，而且功能也能正常使用了。

這個是ios裏面設置的大小位置
mainViewController.view.frame = CGRectMake(0, 0, 300,400);

下面這個是我引入這個組件的代碼

var GiftView = React.createClass({
    propTypes: {

    },
    render(){
        return (
            <View>
                <MusicPlayerView style={styles.con}/>
                <Text style={styles.txt}>我是播放器</Text>
            </View>
        );
    }
})
var MusicPlayerView = requireNativeComponent('RCTMyMusicPlayer', GiftView);
const styles = {
    con: {
        width: 300,
        height:400,
        backgroundColor: '#ff0000',
    },
    txt: {
        marginTop: 30,
    }
}
module.exports = GiftView;

知道了問題的緣由，接下來就很好辦了。咱們可讓ios那邊暴露出組件的一些屬性和方法，咱們在調用時根據咱們前端這邊設置的大小樣式去設置ios那邊的大小位置，這樣就能保證組件的正常顯示了，並且控制權交給前端也算是比較合理的。

後面還會更新，歡迎有興趣的同窗一塊兒交流

原創文章，如需裝載，請註明出處