react-native下引入原生组件无法显示的原因

2024年4月22日 190次阅读 来源: gg_bomb

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

后面还会更新，欢迎有兴趣的同学一起交流

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

    原文作者：gg_bomb
    原文地址: https://segmentfault.com/a/1190000005761357
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞