reactnative面试题及答案（React Native开发跳坑之native-base自定义样式）

本文目录

• React Native开发跳坑之native-base自定义样式
• react-native 返回并刷新
• react native run android javax/xml/bind/annotation/xmlschema
• react native ant design
• react-native拖拽体验优化

React Native开发跳坑之native-base自定义样式

开发平台的搭建就不赘述了，按照网上的资料和官网的Demo都能把HelloWorld搞出来，在这里我只记录一些，花了较长时间才解决的问题。本篇文章解决的问题是在使用第三方UI插件native-base如何自己定义样式。

***隐藏网址***

打开官网-点击docs-点击左侧customize可以看到问题的答案：

这样我们就可以使用对应的主题了，这时的主题是使用的刚才新生成的样式文件，你可以在里面开心地自定义样式了！是不是很简单？
阿里云优惠

react-native 返回并刷新

在项目中，不知道大家有没有遇到这样的一个问题，比如说有两个页面A,B。A页面中有某个按钮点击后可以跳转到B页面，现在有一个需求就是，我在B页面中做了某些操作，然后点击回退按钮，回到A页面，A页面中的数据也需要刷新过来。嗯，如果是做过android开发的朋友一定会知道，解决这样的需求的方法有很多，比如可以使用activity的生命周期，也可以使用广播等等，但是如果在react native中呢？？

我们看一下官网可以知道，react native的生命周期不是针对于页面的，而是组件，什么意思呢？也就是说这个生命周期是组件的生命周期，而不是页面的生命周期，页面在跳转的时候，页面就会回调相应的生命周期的方法，但是组件在页面跳转的时候不一定会回调相应的生命周期方法，所以react native中，使用生命周期这个方式来刷新页面，并不是最好的选择。那么react native中有没有一个类似与广播这样的东东呢。有的，就是这个东西：DeviceEventEmitter.

react native run android javax/xml/bind/annotation/xmlschema

html5现在还占优势的。 1、开发方式 （1）代码结构： React Native更为合理，组件化程度高 （2）UI布局：Web布局灵活度 》 React Native 》 Native

react native ant design

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

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

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

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

规则

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

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

点击后会触发一个操作。

复选框

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

用于选择日期或者时间。

用于接受单行文本。

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

***隐藏网址***

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

在一组预设数据中进行选择，e.g. 省市区选择。

在两个互斥对象进行选择，eg：选择开或关。

用作增加或者减少当前数值。

允许用户在一个区间中选择特定值，eg：控制屏幕的显示亮度。

一般可位于 NavBar 下方，通过『取消按钮』退出激活状态。

用于接受多行文本。

图标右上角的红点、数字或者文字。用于告知用户，该区域的状态变化或者待处理任务的数量。

可以折叠/展开的内容区域。

走马灯，轮播图

在水平和垂直方向，将布局切分成若干等大的区块。

单个连续模块垂直排列，显示当前的内容、状态和可进行的操作。eg：联系人列表。

当你需要一个 infinite scroll 列表时，请使用 ListView 。

从 3.0.0 开始使用 ant-design-icons 字体图标不需要单独安装但是需要 link

***隐藏网址***

安装完成后需要link字体文件

使用方式：

在导航栏下方，一般用作系统提醒、活动提醒等通知。

进行标记和分类的小标签，用于标记事物的属性和维度，以及进行分类。

显示一个任务的进度；或者引导用户完成某个复杂任务。

从底部弹出的模态框，提供和当前场景相关的 2 个以上的操作动作，也支持提供标题和描述。内置固定的展示样式、不支持特别灵活的修改。

活动指示器。 表明某个任务正在进行中。

用作显示系统的重要信息，并请求用户进行操作反馈，eg：删除某个重要内容时，弹出 Modal 进行二次确认。

表明某个任务的当前进度。

一种轻量级反馈/提示，可以用来显示不会打断用户操作的内容，适合用于页面转场、数据交互的等场景中。

在整张页面中组织插画、图标、文字等内容，向用户反馈操作结果。

在整张页面中组织插画、图标、文字等内容，向用户反馈操作结果。

为组件内建文案提供统一的国际化支持。

Provider 使用 React 的 context 特性，只需在应用外围包裹一次即可全局生效。

我们暂时只提供英语，中文两种语言支持（ 默认语言是中文 ），所有语言包可以在 这里 找到。

如果你找不到你需要的语言包，欢迎你在 英文语言包 的基础上创建一个新的语言包，并给我们 Pull Request。

本模块仅用于组件的内建文案，若有业务文案的国际化需求，建议使用 react-intl ，可参考示例： Intl demo 1 和 Intl demo 2 。

react-native拖拽体验优化

需求是多个可以拖拽的对象所以需要知道每次是拖拽哪个，而调用方法需要用 {...this.panResponder.panHandlers} 解构之后得到的json通过props传递给组件，使得组件变成响应者，打印 {...this.panResponder.panHandlers}

多个拖拽就不能知道是哪个变成了响应者

Animated.View 绑定事件，如

将index作为参数传递过去就知道是哪项作为了响应者，但是，参数中gestureState是 undefined

官网中说： 它提供了一个对触摸响应系统响应器的可预测的包装。对于每一个处理函数，它在原生事件之外提供了一个新的gestureState对象。

所以不用 PanResponder.create 得不到gestureState对象

项目中使用了第二种方法，因为拖拽时需要得到 gestureState对象

ScrollView的children有3个View， scheduleList 是0-24小时的间距， lineWrap 是今天线，绝对定位， scheduleSelectList 是选中的时间段，绝对定位。

在android里面只有1/4的区域能够点击，ios没事，截图中绿色和黄色的交界处才能点击。原来只有图标能点击(圆圈灰色X，24 24)，在手机中点击体验不好，改成黄色区域能够点击(50 50),因为黄色删除按钮和拖动按钮都是绝对定位，通过拖动，动态设置box(蓝色区域)的height。

蓝色区域外的区域点击在android中无效

这个时候，按钮就在区域内了，可以点击按钮全部位置了

接下来就遇到第二个问题

2个box之间间隔一个区域，这个时候就不能选择这个区域了，2个box区域重叠，上面一个box的高度向下25，下面一个box的top向上25，中间的一个区域不能点击

设置区域 position: ’absolute’, zIndex: 100 会导致按钮的 3/4 能点击，左下角 1/4 不能点击问题

解决方案

解决之后

红色区域在andriod能点击选中

但是在ios中红色区域是在青色的内部(心中感到ios和anroid都有不同的渲染机制，都有坑)，只有设置外层的View的zIndex: 100大于青色区域才行，ios中内部View的zIndex是在外层zIndex 的基础上的。所以方案失败。(如果设置外面的View的zIndex: 100,就不能设置width： 80%， 因为每个区域都有一个下边框，80%的话下边框的长度也变成了80%了，可以通过设置内部的View的width为Dimensions.get(’window’).width*0.8 这时候的下边框就是一样了，最终没采用这种方案）

最终方案

通过设置 scheduleList.map((li, index) =》 ()) 生成不同时间段的高为0.5的下边框(绝对定位)， 内部View展示为80%，效果就是上图一样了

rn的体验等级，能用，凑合，流畅，丝滑