本篇属于私人笔记。
client 引导部分
一、assets: 音频，图片，字体
├── assets
│ ├── audios
│ ├── fonts
│ └── images
二、main"胶水"函数
├── App.jsx ├── App.less ├── main.js └── templates └── index.html
- 引导入口
templates/index.html 涉及到 webpack，另起一篇单述。【待定】
module.exports = [ { filename: 'index.html', template: path.resolve(__dirname, '../client/templates/index.html'), inject : true, chunks : ['app'], entry : { key : 'app', file: path.resolve(__dirname, '../client/main.js'), }, }, ];
- 引导顺序
基本上：index.html【app】--> main.js (胶水角色) --> App.js【UI组件】
main.js
ReactDom.render( <Provider store={store}> <App /> </Provider>, document.getElementById('app'), );
- 初始化功能
异步通信涉及到的socket.io部分。【待定】
client's Redux 部分
一、谁是第一个 container
- connect 函数
没有第二个参数：mapDispatchToProps
如下可见，状态有很多属性。
[state/reducer.js]
const initialState = immutable.fromJS({ user: null, focus: '', connect: true, ui: { showLoginDialog: false, primaryColor, primaryTextColor, backgroundImage, sound, soundSwitch, notificationSwitch, voiceSwitch, }, });
Ref: immutable.js 在React、Redux中的实践以及常用API简介 【待定】
- 获取"可用"状态
(1). render中获取状态，用于显示；
(2). componentDidMount 中获取，用于显示；
二、UI组件
├── modules
│ └── main
│ ├── Main.jsx
│ ├── Main.less
- Main 组件
Login是独立的Dialog，所以在此不展开。
main主键在这里是一个childStyle，类似子窗口。
import Main from './modules/main/Main';
render() { const { showLoginDialog } = this.props; return ( <div className="app" style={this.style}> <div className="blur" style={this.blurStyle} /> <div className="child" style={this.childStyle}> <Main /> </div> <Dialog visible={showLoginDialog} closable={false} onClose={action.closeLoginDialog}> <Login /> </Dialog> </div> ); }
- UI 组件的组合
import React, { Component } from 'react';
import { immutableRenderDecorator } from 'react-immutable-render-mixin';
import Sidebar from './sidebar/Sidebar';
import ChatPanel from './chatPanel/ChatPanel';
import './Main.less';
/**
* 可以实现装饰器的写法
*/
@immutableRenderDecorator
class Main extends Component {
render() {
return (
<div className="module-main">
<Sidebar />
<ChatPanel />
</div>
);
}
}
export default Main;
装饰器模式（Decorator Pattern），允许向一个现有的对象添加新的功能，同时又不改变其结构。这种类型的设计模式属于结构型模式，它是作为现有的类的一个包装。
三、嵌套下的"第二个 container"
├── modules
│ └── main
│ ├── chatPanel
│ └── sidebar
│ ├── AppDownload.jsx
│ ├── OnlineStatus.jsx
│ ├── Sidebar.jsx
│ ├── Sidebar.less
│ ├── SingleCheckButton.jsx
│ └── SingleCheckGroup.jsx
siderBar是个独立的子模块，等价于setting page。
[sideBar/Sidebar.jsx]
四、另外两个 container
[chatPanel/ChatPanel.jsx]
import React, { Component } from 'react';
import FeatureLinkmans from './featureLinkmans/FeatureLinkmans';
import Chat from './chat/Chat';
import './ChatPanel.less';
class ChatPanel extends Component {
render() {
return (
<div className="module-main-chatPanel">
<FeatureLinkmans /> # 其中有一个connect
<Chat /> # 其中有一个connect
</div>
);
}
}
export default ChatPanel;
[featureLinkmans/FeatureLinkmans.jsx]
export default connect(state => ({ isLogin: !!state.getIn(['user', '_id']), }))(FeatureLinkmans);
[chat/chat.js]
export default connect((state) => { const isLogin = !!state.getIn(['user', '_id']); if (!isLogin) { return { userId : '', focus : state.getIn(['user', 'linkmans', 0, '_id']), creator: '', avatar : state.getIn(['user', 'linkmans', 0, 'avatar']), members: state.getIn(['user', 'linkmans', 0, 'members']) || immutable.List(), }; } const focus = state.get('focus'); const linkman = state.getIn(['user', 'linkmans']).find(g => g.get('_id') === focus); return { userId: state.getIn(['user', '_id']), focus, type: linkman.get('type'), creator: linkman.get('creator'), to: linkman.get('to'), name: linkman.get('name'), avatar: linkman.get('avatar'), members: linkman.get('members') || immutable.fromJS([]), }; })(Chat);
当然，之后嵌套的connect以及contrainer还有很多。
五、动作信号
├── state
│ ├── action.js
│ ├── reducer.js
│ └── store.js
- createStore 接收 reducer
import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(
reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
);
export default store;
- reducer 返回新状态
const initialState = immutable.fromJS({ user : null, focus : '', connect: true, ui: { showLoginDialog: false, primaryColor, primaryTextColor, backgroundImage, sound, soundSwitch, notificationSwitch, voiceSwitch, }, });
这里采用了switch的方式判断：action.type。
function reducer(state = initialState, action) { switch (action.type) { case 'Logout': { ...return newState; } case 'SetDeepValue': { return newState; } ...
- action 定义动作信号
----> 这里有值得玩味的地方，之前connect没有使用第二个参数，故，我们仍然采用dispatch的“非自动方式”发送信号。
# 举例子
async function setGuest(defaultGroup) { defaultGroup.messages.forEach(m => convertRobot10Message(m)); dispatch({ type: 'SetDeepValue', keys: ['user'], value: { linkmans: [ Object.assign(defaultGroup, { type: 'group', unread: 0, members: [], }), ] }, }); }
----> 大括号自动处理动作信号。
下图中的大括号{...}就有了默认执行dispatch的意思，即执行上图return的动作信号。
React Native 移植
一、代码结构
除了 App.js 以及utils文件夹外，还包括下面的主要移植内容。
. ├── App.js <---- 实际的起始点 ├── assets │ └── images │ ├── 0.jpg │ └── baidu.png ├── components │ ├── Avatar.js │ ├── Expression.js │ └── Image.js ├── pages │ ├── Chat │ │ ├── Chat.js │ │ ├── Input.js │ │ ├── Message.js │ │ └── MessageList.js │ ├── ChatList │ │ ├── ChatList.js │ │ └── Linkman.js │ ├── LoginSignup │ │ ├── Base.js │ │ ├── Login.js │ │ └── Signup.js │ └── test.js ├── socket.js └── state ├── action.js ├── reducer.js └── store.js
二、引导部分
Main的provider部分需改为router，因为手机只适合page router。
也就是，Main.js+App.js in Web ----> App.js in RN。
import React from 'react'; import { StyleSheet, View, AsyncStorage, Alert } from 'react-native'; import { Provider } from 'react-redux'; import { Scene, Router } from 'react-native-router-flux'; import PropTypes from 'prop-types'; import { Root } from 'native-base'; import { Updates } from 'expo'; import socket from './socket'; import fetch from '../utils/fetch'; import action from './state/action'; import store from './state/store'; import convertRobot10Message from '../utils/convertRobot10Message'; import getFriendId from '../utils/getFriendId'; import platform from '../utils/platform'; import packageInfo from '../package';
// App控件中的内容也放在了这里，成为“Main+App” import ChatList from './pages/ChatList/ChatList'; import Chat from './pages/Chat/Chat'; import Login from './pages/LoginSignup/Login'; import Signup from './pages/LoginSignup/Signup'; import Test from './pages/test'; async function guest() { const [err, res] = await fetch('guest', { os: platform.os.family, browser: platform.name, environment: platform.description, }); if (!err) { action.setGuest(res); } } socket.on('connect', async () => { // await AsyncStorage.setItem('token', ''); const token = await AsyncStorage.getItem('token'); if (token) { const [err, res] = await fetch('loginByToken', Object.assign({ token, }, platform), { toast: false }); if (err) { guest(); } else { action.setUser(res); } } else { guest(); } }); socket.on('disconnect', () => { action.disconnect(); }); socket.on('message', (message) => { // robot10 convertRobot10Message(message); const state = store.getState(); const linkman = state.getIn(['user', 'linkmans']).find(l => l.get('_id') === message.to); let title = ''; if (linkman) { action.addLinkmanMessage(message.to, message); if (linkman.get('type') === 'group') { title = `${message.from.username} 在 ${linkman.get('name')} 对大家说:`; } else { title = `${message.from.username} 对你说:`; } } else { const newLinkman = { _id: getFriendId( state.getIn(['user', '_id']), message.from._id, ), type: 'temporary', createTime: Date.now(), avatar: message.from.avatar, name: message.from.username, messages: [], unread: 1, }; action.addLinkman(newLinkman); title = `${message.from.username} 对你说:`; fetch('getLinkmanHistoryMessages', { linkmanId: newLinkman._id }).then(([err, res]) => { if (!err) { action.addLinkmanMessages(newLinkman._id, res); } }); } // console.log('消息通知', { // title, // image: message.from.avatar, // content: message.type === 'text' ? message.content : `[${message.type}]`, // id: Math.random(), // }); });
----------------------------------------------------------------------------------------------------------
export default class App extends React.Component { static propTypes = { title: PropTypes.string, }
static async updateVersion() { if (process.env.NODE_ENV === 'development') { return; } const result = await Updates.fetchUpdateAsync(); if (result.isNew) { Updates.reload(); } else { Alert.alert('提示', '当前版本已经是最新了'); } }
render() { return ( <Provider store={store}> <Root> <Router> <View style={styles.container}> <Scene key="test" component={Test} title="测试页面" /> <Scene key="chatlist" component={ChatList} title="消息" onRight={App.updateVersion} rightTitle={`v${packageInfo.version}`} initial /> <Scene key="chat" component={Chat} title="聊天" getTitle={this.props.title} /> <Scene key="login" component={Login} title="登录" backTitle="返回聊天" /> <Scene key="signup" component={Signup} title="注册" backTitle="返回聊天" /> </View> </Router> </Root> </Provider> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', }, });
三、首页之会话通道
聊天通道列表，也就是ChatList。
在此，好友和聊天通道是混淆在一起的，能聊则默认是好友。
回话通道列表：
import React, { Component } from 'react';
import { ScrollView } from 'react-native';
import { Container } from 'native-base';
import { connect } from 'react-redux';
import ImmutablePropTypes from 'react-immutable-proptypes';
import Linkman from './Linkman';
class ChatList extends Component {
static propTypes = {
linkmans: ImmutablePropTypes.list,
}
--------------------------------------------------------------------------------------
static renderLinkman(linkman) {
const linkmanId = linkman.get('_id');
const unread = linkman.get('unread');
const lastMessage = linkman.getIn(['messages', linkman.get('messages').size - 1]);
let time = new Date(linkman.get('createTime'));
let preview = '暂无消息';
if (lastMessage) {
time = new Date(lastMessage.get('createTime'));
preview = `${lastMessage.get('content')}`;
if (linkman.get('type') === 'group') {
preview = `${lastMessage.getIn(['from', 'username'])}: ${preview}`;
}
}
return (
<Linkman
key={linkmanId}
id={linkmanId} // 之后路由跳转时有用
name={linkman.get('name')}
avatar={linkman.get('avatar')}
preview={preview}
time={time}
unread={unread}
/>
);
}
render() {
const { linkmans } = this.props;
return (
<Container>
<ScrollView>
{
linkmans && linkmans.map(linkman => (
ChatList.renderLinkman(linkman)
))
}
</ScrollView>
</Container>
);
}
}
export default connect(state => ({
linkmans: state.getIn(['user', 'linkmans']),
}))(ChatList);
单个回话Linkman新增了一个属性：id，为了点击事件后的路由跳转。
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Text, StyleSheet, View, TouchableOpacity } from 'react-native';
import autobind from 'autobind-decorator';
import { Actions } from 'react-native-router-flux';
import Avatar from '../../components/Avatar';
import Time from '../../../utils/time';
import action from '../../state/action';
export default class Linkman extends Component {
static propTypes = {
id: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
avatar: PropTypes.string.isRequired,
preview: PropTypes.string,
time: PropTypes.object,
unread: PropTypes.number,
}
formatTime() {
const { time: messageTime } = this.props;
const nowTime = new Date();
if (Time.isToday(nowTime, messageTime)) {
return Time.getHourMinute(messageTime);
}
if (Time.isYesterday(nowTime, messageTime)) {
return '昨天';
}
return Time.getMonthDate(messageTime);
}
@autobind
handlePress() {
const { name, id } = this.props;
action.setFocus(id);
Actions.chat({ title: name }); // --> 与网页不同，应该是路由跳转到新页面
}
render() {
const { name, avatar, preview, unread } = this.props;
return (
<TouchableOpacity onPress={this.handlePress}>
<View style={styles.container}>
<Avatar src={avatar} size={50} />
<View style={styles.content}>
<View style={styles.nickTime}>
<Text style={styles.nick}>{name}</Text>
<Text style={styles.time}>{this.formatTime()}</Text>
</View>
<View style={styles.previewUnread}>
<Text style={styles.preview} numberOfLines={1}>{preview}</Text>
{
unread > 0 ?
<View style={styles.unread}>
<Text style={styles.unreadText}>{unread}</Text>
</View>
:
null
}
</View>
</View>
</View>
</TouchableOpacity>
);
}
}
const styles = StyleSheet.create({
...
});
四、次页之会话内容
- 基本框架
三大部分：输入框，消息列表，消息显示。
平心而论，Feature差异挺大，还是不参考WEB，重新实现RN为好。
用到的State基本一致。
class Chat extends Component { render() { return ( <KeyboardAvoidingView style={styles.container} behavior="padding" keyboardVerticalOffset={isiOS ? 64 : 80}> <Container style={styles.container}> <MessageList /> <Input /> </Container> </KeyboardAvoidingView> ); } }
- 消息列表
render() { const { messages } = this.props; const { imageViewerDialog, imageViewerIndex } = this.state; const closeImageViewer = openClose.close.bind(this, 'imageViewerDialog'); return ( <ScrollView style={styles.container} ref ={i => this.scrollView = i} refreshControl={ <RefreshControl refreshing={this.state.refreshing} onRefresh ={this.handleRefresh} title ="获取历史消息" titleColor="#444" /> } onContentSizeChange={this.handleContentSizeChange} > { messages.map((message, index) => ( this.renderMessage(message, index === messages.size - 1) )) } ...
...
</ScrollView> ); }
map逐条渲染Message。
renderMessage(message, shouldScroll) { const { self } = this.props; const props = { key: message.get('_id'), avatar: message.getIn(['from', 'avatar']), nickname: message.getIn(['from', 'username']), time: new Date(message.get('createTime')), type: message.get('type'), content: message.get('content'), isSelf: self === message.getIn(['from', '_id']), tag: message.getIn(['from', 'tag']), shouldScroll, scrollToEnd: this.scrollToEnd, }; if (props.type === 'image') { props.loading = message.get('loading'); props.percent = message.get('percent'); props.openImageViewer = this.openImageViewer; } return ( <Message {...props} /> ); }
- 对话框
renderContent() { const { type } = this.props; switch (type) { case 'text': { return this.renderText(); } case 'image': { return this.renderImage(); } default: return ( <Text style={styles.notSupport}>不支持的消息类型, 请在Web端查看</Text> ); } }
render() { const { avatar, nickname, isSelf } = this.props; return ( <View style={[styles.container, isSelf ? styles.containerSelf : styles.empty]}> <Avatar src={avatar} size={44} /> <View style={[styles.info, isSelf ? styles.infoSelf : styles.empty]}> <View style={styles.nickTime}> <Text style={styles.nick}>{nickname}</Text> <Text style={styles.time}>{this.formatTime()}</Text> </View> <View style={styles.content}> {this.renderContent()} </View> </View> </View> ); }
- 输入框
主要是两个动作：
(1) 本地渲染一条消息的action；
(2) 异步动作发送一条消息，如下；
@autobind async sendMessage(localId, type, content) { const { focus } = this.props; const [err, res] = await fetch('sendMessage', { to: focus, type, content, }); if (!err) { res.loading = false; action.updateSelfMessage(focus, localId, res); } }
五、Redux 的代码复用
最后就是state文件夹下的store, reducer, action。
代码基本可以完全拷贝过来用，毕竟逻辑是一致的，只是view不同而已。
这也是React-Redux美妙的地方！
Redux 基本上就是如此，继续深入则需要大量实践来体会内涵。