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那边的大小位置，这样就能保证组件的正常显示了，并且控制权交给前端也算是比较合理的。

后面还会更新，欢迎有兴趣的同窗一块儿交流

原创文章，如需装载，请注明出处