react-native下引入原生组件无法显示的原因
导入原生组件到RN应该注意的问题不是所有的元生组件都可以导入RN的,有的要支持 引用原生组件在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里面设置的大小位置 mainViewController.view.frame = CGRectMake(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那边的大小位置,这样就能保证组件的正常显示了,而且控制权交给前端也算是比较合理的。 后面还会更新,欢迎有兴趣的同学一起交流
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |