React Native（四）自定义Header和Footer组件

Posted 2023-03-25

参考技术A 定义组件：
1、定义有状态组件：
// 定义Header类，这个类是Component的子类
// render()方法是一个渲染方法，该方法返回一个View模块
class Header extends Component
/* 实现Header类的render方法，这个方法返回一个View，显示Footer*/
render()
return (
<View>
<Text>我是Header</Text>
</View>
);

2、定义无状态组件：
const Footer =() =>(
<View>
<Text>我是Footer</Text>
</View>
)
3、将自定义的组件导出，才能在其他js文件中使用。
export default Header; // 导出这个模块，供外部调用
module.exports = 'Footer' // ES5的语法
注：如果在同一个文件中定义和使用组件，则无需导出。
4、导入自定义组件：
import Header from "./header"; // 引入我们的Header模块

react native modal 自定义弹出框

参考技术A 这一篇其实是应该和之前的那篇react native 触摸事件一起的，因为研究触摸事件就是为了做这个功能。
触摸事件文章地址： http://www.jianshu.com/p/1ef0b869e532

Modal 组件可以用来覆盖包含 react native 根视图的原生视图。

应用场景： 自定义弹出框

react native 提供的 Alert 组件，局限性比较大，无法进行自定义，幸好还有 Modal 可以来进行自定义开发。

效果图如下：

（一） 常见属性：

animationType： enum('none', 'slide', 'fade') 动画类型
onRequestClose： Platform.OS === 'Android' ? PropTypes.func.isRequired : PropTypes.func
onShow： function 显示完毕的回调方法
transparent： bool 是否为透明，默认为不透明，弹框需要将这个设置成 true.
visible： bool 是否显示

（二） 示例

1、布局：Modal 中可以再自定义布局，非常方便。而且 Modal 是覆盖整个屏幕的，可以形成半透明遮罩状态，这就需要在最外一层上面设置其背景为半透明：

2、点击空白处关闭：

Modal 的显示与隐藏是通过 modalVisible 的状态来决定的，所以只要在最外面加上触屏事件就可以了。

3、定位：

因为我需要它根据我所点击的位置去定位，所以需要取到点击事件处于屏幕的位置：

现在位置信息已经拿到并且将其放入 state 中，然后用的时候直接去取 state 的值就可以了。