React-Native调起iOS页面交互

这种情况下， present 很好做，因为上级页面无所谓是不是 UINavigationController ，都可以调起 presentViewController:animation: 方法。

调用 push 方法的时候，必须保证上级页面和待跳转页面都是 UINavigationController 页面，要不然不能实现此 *** 作。

直接建立的iOS工程， appdelegate 的实现是这样的：

注意： selfwindowrootViewController 的页面是 UIViewContrller ,不是 UINavigationController ，这个时候该怎么办呢？

问题来了，程序运行起来，导航栏还是存在的，push *** 作可以成功，只有在pop回来的时候导航栏才会消失。

NativeCommonm 类里导入 AppDelegate ，在主线程实现：

问题完美解决。

创建日期： 2022年1月23日

题记：

随手记载，项目中，遇到的一些问题。没有去查深层原因，仅为提个醒。

当在ScrollView中，有Text组件的时候，一定要注意Text长度的指定。

问题点：

一个纵向滚动的scrollView，如果Text长度未指定，当Text的内容过长时，会出现横向滚动条。

常用的组件有reactNative的Modal以及react-native-modal。

问题点：

其中一个，好像是无法把Android的statusBar覆盖住。

另外，在iOS上，有时候会出现，关闭前一个modalView，紧接着再打开另一个ModalView的时候，第二个打开的ModalView并未显示，没有错误信息，但是画面卡住了。这个时候，用Xcode去执行，就会看到警告信息。说已经有一个modalView在显示了。

解决方法：

调查的时候，发现，这个在四五年前有人问过，说是解决了，然而，依然遇到了。笔者用简单的程序进行测试，但是并没有再现。可能是跟整体项目相关，出现bug，需要特定的时机。

最后，只能用绝对布局，自己做了一个ModalView。

当父组件用的Pressable时，如果子组件是一个FlatList，其中有数个Item是非活性的。当你手指触碰的是非活性的Item时，滚动手势不会起作用，起作用的是父组件的Pressable。即便设置了preventPoint，但是，非活性可能是改变了它的值，效果依然是不变的。

当父组件用的是Touchable的时候，上述的状况，FlatList是可以滚动的，但是，如果在此上，出现pressable系的按钮，那么这个按钮的点击事件，是不起作用的。这里，没有细致调查，是否可以通过属性来改变。

一定要注意多任务，非同期存储的时候，会不会进行覆盖。因为原有库的merge方法，不是支持所有平台。使用的时候，注意该库是否有更新。

Drawer is a panel that displays the app's navigation options on the left edge of the screen

在点击控件或者某个区域后，浮出一个气泡菜单来做更多的 *** 作。 如果设置了遮罩层，建议通过点击遮罩层的任一位置，进行退出。

分隔长列表，每次只加载一个页面。

由至少 2 个分段控件组成，用作不同视图的显示；是 iOS 的推荐组件。

规则

用于让用户在不同的视图中进行切换。

位于 APP 底部，方便用户在不同功能模块之间进行快速切换。

点击后会触发一个 *** 作。

复选框

DatePickerView 的功能类似于 DatePicker ，但它是直接渲染在区域中，而不是d出窗口。

用于选择日期或者时间。

用于接受单行文本。

注意：只是选择器，一般用于上传前的文件选择 *** 作，但不包括上传的功能

权限相关的问题可以移步至： >

我们在页面的render()方法中，使用了一个组件，可以是系统的如Text或者自定义的组件MyCustomText；

有两种方法可以获取该组件的实例

第一、render中使用的方法：

<MyCustomText style = {} ref = {(myCustomText)=>thismyCustomText = myCustomText}>

</MyCustomText>

其他地方，如定义了一个submit函数

submit(){

//在该函数中想要使用MyCustomText的一个方法show，那么就可以这样调用啦

thismyCustomTextshow();

}

第二、render中使用的方法：

<MyCustomText style = {} ref = 'myCustomText'>

</MyCustomText>

其他地方，如定义了一个submit函数

submit(){

//在该函数中想要使用MyCustomText的一个方法show，那么就可以这样调用啦

thisrefsmycustomTextshow();

}

在 react native 开发中，webview 通常只是用来显示网页或者带有 html 标签的字符串。但是，很多时候需要 react native 与 webview 的内容进行交互，比如点击事件，滑动事件等等。react native 可以通过监听 onMessage 可以接收到由 windowpostMessage 发送的 字符串。

在web开发中，以往结构、样式、行为的开发通常是分离的，也就是所谓的“关注点分离（separation of concerns）”，它的意思是，各种技术只负责自己的领域（html、css、js），不要混合在一起，形成耦合。

HTML 语言：负责网页的结构，又称语义层

CSS 语言：负责网页的样式，又称视觉层

JavaScript 语言：负责网页的逻辑和交互，又称逻辑层或交互层

这在往日都是好的实践推荐。但是这几年组件化和模块化开发思维渐行其道（特别是React出来后，打破了这一原则，React的基础组织单元是组件，强制要求把html、css、js写在一起），特性或者功能粒度成为一种软件设计和开发上的选择。

那么，在实际开发中，有没有一种超集可以贯穿三者呢？ 有，jsx和typescript就是，jsx与typescript是两个不同的概念，但都是一种语法糖，都是JavaScript的超集合，typescript16版本是支持jsx的，在react中会用jsx（write css in js、write “html” in js）来开发组件，React-native是react的扩展，在组件开发上也是用的jsx。

                                                      component in react-native

在RN中，并不需要学习什么特殊的语法来定义样式，使用JavaScript来写样式。样式名（属性）基本上遵循的是CSS的命名 和规则（比如后定义覆盖原则、样式表现等），只是按照JS的语法要求，某些样式名需要用驼峰命名法（比如css中的background-color 需写成“backgroundColor”）。

样式的定义有两种方式：

内联方法： style={{color: red}}

样式生成器: : styleSheetcreat({textColor: {color: red}})

在RN中，核心组件都有一个名为style的属性，样式在RN中的应用就是给该属性赋值。属性的值可为JavaScript中的对象（｛color：red｝），或者数组([{color: red}, {color: blue}])。

RN中的组件（基础组件、RN中提供的组件）所能应用的样式有一定的范畴，比如color样式不能应用在View组件中。识别哪些组件有哪些可用的样式有两种方法：1，去网上或者官网查。2，调试时打开warn提醒，应用一个样式，如果该组件没有该样式，则会有告警。告警里面会列出该组件所能应用到的样式集合。

在React Native中使用flexbox规则来指定某个组件的子元素的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局结构。RN中的Flexbox规则和Web中Css FlexBox基本一致，主要的不同就是flex-direction默认不同，css中默认是水平方向，rn中默认是垂直方向。具体的flexbox布局相关的知识可以参考我之前写的一篇文章《盒模型与布局》

Web中页面的绘制是浏览器器UI后端做的，而在RN中则是交由原生去绘制（例如ios中的UIkits，具体RN和原生的交互和通讯可以参考我之前写的另外一篇文章《React-Native原理解析与通讯机制阐述（Eg：ios）》），这里只做简单的浅析和对比。

                                                    UI Backend就是绘制页面图层的模块。

简单说就是Native初始化 -> 加载JS，JS端注册组件 ->端上调用JS端run方法，传入入口组件名称 -> JS端启动渲染流程。

创建： ReactNative的UI组件通过requireNativeComponent->createReactNativeComponentClass->ReactNativeBaseComponent下mountComponent的调用关系，最终在mountComponent中调用UIManager（Native Module）组件创建View：UIManagercreateView(tag, thisviewConfiguiViewClassName, nativeTopRootTag, updatePayload);，在Native端，UIManager调用对应组件类型的ViewManager（单例，管理类）创建实例。

更新：属性--样式同步，也就是re-render的过程，在这过程中会调用ReactNativeBaseComponent下receiveComponent->UIManagerupdateView完成。

参考： >

近期项目中用到一些d框界面，经过几次优化后觉得挺好用，所以分享给大家。

实现方法很简单，就做几个动画，没什么可说的。可以根据自己需求做一些调整。

该组件对外提供3个可自定义的属性

提供2个控制显示方法和一个控制隐藏方法

使用方法有两种， 建议使用第二种方法

方法一： 在组件中添加属性，然后在合适的地方调用组件的show和hide方法控制显示和隐藏。在一个界面多个d框的情况下需要在renderContent方法中判断显示哪一个d框，复杂度增加，所以建议使用第二种方法。

方法二： 调用组件提供的showWithContent方法。调用该方法后会自动显示d框，只需要在合适的位置调用hide隐藏方法

以上就是关于React-Native调起iOS页面交互全部的内容，包括:React-Native调起iOS页面交互、ReactNative 走过的坑、react native ant design等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！