react-native下引入原生元件無法顯示的原因

gg_bomb發表於2016-06-20
React元件

匯入原生元件到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那邊的大小位置，這樣就能保證元件的正常顯示了，而且控制權交給前端也算是比較合理的。

後面還會更新，歡迎有興趣的同學一起交流

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

相關文章