12、React Native核心API实践：构建消息应用界面

React Native核心API实践：构建消息应用界面

1. 消息列表与返回按钮处理

在消息列表部分，使用了 Alert 和 BackHandler 这两个核心API，实现了跨平台的消息删除和放大交互功能。当 state.fullscreenImageId 存在时，表示当前正在显示全屏图像，此时返回按钮应关闭全屏图像，返回 true 以阻止退出应用；若未显示全屏图像，则返回 false ，允许默认的返回按钮行为（退出应用）。

componentWillUnmount() {
    this.subscription.remove();
}
// ...
if (state.fullscreenImageId exists) {
    // 显示全屏图像，返回true阻止退出应用
    return true;
} else {
    // 未显示全屏图像，返回false允许默认退出行为
    return false;
}

2. 构建工具栏

2.1 工具栏组件创建

工具栏位于键盘上方，包含一个用于输入消息的输入框，以及切换到图像选择器和发送位置的按钮。创建 Toolbar.js 文件，在其中定义 Toolbar 组件，并添加 propTypes 用于定义焦点状态和各种函数属性。