在家使用自己的 Mac，工作中使用公司分配的 ThinkPad，MacOS 和 Windows 输入法切换中英文模式快捷键不一样，很是别扭。常大写模式很少用，个人感觉 MacOS 使用 Shift + 字母输入大写更舒适。借助 [AutoHotkey](https://www.autohotkey.com) 使 Windows  像 MacOS 一样使用 **CapsLock** 切换中英文模式

## 脚本

实现如下功能：

- 点按切换中/英文模式
- 长按切换大小写模式

首先确认系统输入法按键设置中**中/英文模式切换**勾选了 **Ctrl + 空格键**

![系统输入法按键设置图](https://cdn.jsdelivr.net/gh/Honyex/static/imgs/windows_keyboard_settings.png)

编写脚本

```
#NoEnv

SetCapsLockState, Alwaysoff
SetStoreCapsLockMode, Off

CapsLock::
KeyWait, CapsLock, T0.3
If ErrorLevel {
  Send, {CapsLock}
  KeyWait, CapsLock
} else {
  Send, {Ctrl down}{Space down}{Space up}{Ctrl up}
}
```

## 开机启动

按下 **Win + R**，输入 **shell:startup** 后回车打开开机启动文件夹，复制（或复制脚本的快捷方式）到启动文件夹即可

启动文件夹一般为：

```
C:\Users\<UserName>\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup
```

如果希望多个脚本开机启动，建议将多个脚本合并在一个文件后放入启动文件夹

## 感谢

- [Windows下Capslock键切换中英文](https://blog.csdn.net/crt106/article/details/103657186)
- [Add an app to run automatically at startup in Windows 10](https://support.microsoft.com/en-us/windows/add-an-app-to-run-automatically-at-startup-in-windows-10-150da165-dcd9-7230-517b-cf3c295d89dd)


Windows

Windows 使用 CapsLock 切换中英文模式

## 查看时区

```bash
date -R
# Thu, 20 Jan 2022 10:20:28 +0800
```

末尾的 `+0800` 表示时区

**查看 `date` 命令手册：**

```bash
man date
```

**`date` 格式化输出：**

```bash
date +"%Z %z"
# CST +0800
```

`%Z` 表示字符形式的时区缩写，`%z` 表示数字形式的时区

## 设置时区

使用 `tzselect` 命令选择时区。

```bash
tzselect
```

输入命令后根据提示选择地理区域

选择结束确认后出现如下提示：

```
You can make this change permanent for yourself by appending the line
	TZ='Asia/Shanghai'; export TZ
to the file '.profile' in your home directory; then log out and log in again.

Here is that TZ value again, this time on standard output so that you
can use the /usr/bin/tzselect command in shell scripts:
Asia/Shanghai
```

**注意：** 根据提示得知，`tzselect` 并不会永久性修改时区。如果想要永久性修改时区可以按照提示修改环境变量 `TZ`。

```bash
vi ~/.profile
# 追加如下行
TZ='Asia/Shanghai'; export TZ
```

## `/etc/localtime`

环境变量 `TZ` 默认为空，此时系统默认使用 `/etc/localtime` 文件来确认时区。而 `/etc/localtime` 是指向 `/usr/share/zoneinfo/` 文件夹下时区文件的软链接

```
~ ll /etc/localtime 
lrwxrwxrwx 1 root root 33 May 27  2020 /etc/localtime -> /usr/share/zoneinfo/Asia/Shanghai
```

可通过修改 `/etc/localtime` 的软链地址来设置时区

```bash
ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime
```


Linux

Linux 查看和修改时区

# Apache Virtual Host

虚拟主机指的是在单一机器上运行多个网站（例如 api.examlple.com 和 docs.example.com）。虚拟主机可以基于 IP，即每个 IP 一个站点； 或者基于名称， 即每个 IP 多个站点。这些站点运行在同一物理服务器上的事实不会明显的透漏给最终用户

官方给出了比较全面的的[示例](https://httpd.apache.org/docs/2.4/vhosts/examples.html)

## 示例

`docs.example.com` 和 `blog.example.com` 指向同一个 IP

```properties
Listen 80
<VirtualHost *:80>
  DocumentRoot "/www/docs"
  ServerName docs.example.com
</VirtualHost>
<VirtualHost *:80>
  DocumentRoot "/www/blog"
  ServerName blog.example.com
</VirtualHost>
```

当访问 `docs.example.com` 时使用 `/www/docs` 文件夹的文档

当访问 `blog.example.com` 时使用 `/www/blog` 文件夹的文档



访问时若提示 `Forbidden`

> **Forbidden**
>
> You don't have permission to access this resource.

需要配置文件读取权限

```properties
<Directory "/www/blog">
  Require all granted
</Directory>
```

## 检查配置

修改完配置后使用命令行参数 `-S` 检查。这个命令会显示 Apache 是如何解析配置文件的

```bash
apachectl -S
# 或
httpd -S
```

## 代理 Node.js 服务

需要加载如下模块

- mod_proxy
- mod_proxy_http

可使用 `-M` 检查已加载的模块

```bash
apachectl -M
apachectl -M | grep proxy
```

案例：Node.js 服务部署到同一台机器不同端口，使用 `api.example.com` 代替 `api.example.com:8080` 访问

```properties
<VirtualHost *:80>
  ServerName api.example.com
  ProxyPass "http://127.0.0.1:8080/"
  ProxyPreserveHost On
  ProxyPassReverse "http://127.0.0.1:8080/"
</VirtualHost>
```

### 获取用户真实 IP

使用 Apache 代理 Node.js 服务后，Node.js `request.socket.remoteAddress` 得到的是 Apache 代理服务的 IP，并非用户真实 IP。需做如下改动：

Apache 添加 如下模块

- mod_remoteip

修改配置，增加 [RemoteIPHeader](https://httpd.apache.org/docs/2.4/zh-cn/mod/mod_remoteip.html#remoteipheader)

```properties
# httpd.conf
RemoteIPHeader X-Forwarded-For
RemoteIPTrustedProxy 127.0.0.1
RemoteIPInternalProxy 127.0.0.1
```

Node.js 通过如下方式获取用户真实 IP

```javascript
request.headers['x-forwarded-for'] || request.socket.remoteAddress
```

注意：`x-forwarded-for`  全小写。Node.js 中 headers 属性名为全小写


Apache

Apache Virtual Host

## 概述
[jpush-react-native][jpush-react-native] 是极光推送官方开发的 React Native 版本插件，可以快速集成推送功能。现在最新版本的 JPush SDK 分离了 JPush 及 JCore，让开发者可以分开集成 JMessage 及 JPush（以前 JMessage 包含了 JPush）。
我没有 mac 设备，所以只说 Android 的配置。

## 安装
打开终端，进入项目文件夹，执行以下命令：

```bash
$ npm install jpush-react-native --save
# jpush-react-native 1.4.2 版本以后需要同时安装 jcore-react-native
$ npm install jcore-react-native --save 
```

## 配置

### 1. 自动配置部分
官方：
```bash
$ react-native link
```
作者推荐：
```bash
# 针对性的link，避免之前手动配置的其它插件重复配置造成报错
$ react-native link jpush-react-native
$ react-native link jcore-react-native
```

执行完 link 项目后可能会出现报错，这没关系，需要手动配置一下 build.gradle 文件。

### 2. 手动配置部分
在 Android Studio 中打开你的项目，然后找到 app 或者你自己定义的需要集成 jpush-react-native 的模块，打开此模块下的 build.gradle 文件，做以下改动：
> project/android/app/build.gradle

```groovy
android {
    ...
    defaultConfig {
        applicationId "yourApplicationId" // 此处改成你在极光官网上申请应用时填写的包名
        ...
        manifestPlaceholders = [
                JPUSH_APPKEY: "yourAppKey", //在此替换你的 APPKey
                APP_CHANNEL: "developer-default"    //应用渠道号, 默认即可
        ]
    }
}
...
dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile project(':jpush-react-native')  // 添加 jpush 依赖
    compile project(':jcore-react-native')  // 添加 jcore 依赖
    compile "com.facebook.react:react-native:+"  // From node_modules
}
```

检查 android 项目下的 settings.gradle 配置有没有包含以下内容：
> project/android/settings.gradle

```groovy
include ':app', ':jpush-react-native', ':jcore-react-native'
project(':jpush-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jpush-react-native/android')
project(':jcore-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jcore-react-native/android')
```

检查一下 app 下的 AndroidManifest 配置，有没有增加 \<meta-data\> 部分。
> project/android/app/AndroidManifest.xml

```xml
<application
    
    <meta-data android:name="JPUSH_CHANNEL" android:value="${APP_CHANNEL}"/>
    <meta-data android:name="JPUSH_APPKEY" android:value="${JPUSH_APPKEY}"/>
</application>
```
现在重新 sync 一下项目，应该能看到 jpush-react-native 以及 jcore-react-native 作为 android Library 项目导进来了。

![](http://upload-images.jianshu.io/upload_images/1745101-4eb12666d3d3099f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

接下来加入 JPushPackage

* RN 0.29.0 以下版本

打开 app 下的 MainActivity，在 ReactInstanceManager 的 build 方法中加入 JPushPackage：
> project/android/app/MainActivity.java

![](http://upload-images.jianshu.io/upload_images/3762216-869212b4eefd1c8a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

* RN 0.29.0 以上版本

打开 app 下的 MainApplication.java 文件，然后加入 JPushPackage，[参考 demo](https://github.com/jpush/jpush-react-native/blob/master/example/android/app/src/com/pushdemo/MainApplication.java)：

```java
    // 设置为 true 将不弹出 toast
    private boolean SHUTDOWN_TOAST = false;
    // 设置为 true 将不打印 log
    private boolean SHUTDOWN_LOG = false;

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

        @Override
        protected boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                    new JPushPackage(SHUTDOWN_TOAST, SHUTDOWN_LOG)
            );
        }
    };
```

然后在 MainActivity 中加入一些初始化代码即可：
> project/android/app/src/java/.../MainActivity.java

```java
public class MainActivity extends ReactActivity {
    ...
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        JPushInterface.init(this);
    }

    @Override
    protected void onPause() {
        super.onPause();
        JPushInterface.onPause(this);
    }

    @Override
    protected void onResume() {
        super.onResume();
        JPushInterface.onResume(this);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
    }
}
```

这样就完成了所有的配置。接下来就可以在 JS 中调用插件提供的 API 了。

## 使用

```js
import JPushModule from 'jpush-react-native';

...

componentDidMount() {
    JPushModule.notifyJSDidLoad();
     // 新版本必需写回调函数
    // JPushModule.notifyJSDidLoad((resultCode) => {
    //	  if (resultCode === 0) {}
    //	});
    // 接收自定义消息
    JPushModule.addReceiveCustomMsgListener((message) => {
      this.setState({pushMsg: message});
    });
    // 接收推送通知
    JPushModule.addReceiveNotificationListener((message) => {
      console.log("receive notification: " + message);
    })
    // 打开通知
    JPushModule.addReceiveOpenNotificationListener((map) => {
      console.log("Opening notification!");
      console.log("map.extra: " + map.extras);
      // 可执行跳转操作
      // JPushModule.jumpToPushActivity("SecondActivity");
    });
  }

  componentWillUnmount() {
    JPushModule.removeReceiveCustomMsgListener();
    JPushModule.removeReceiveNotificationListener();
  }
```

## 错误处理
1. 
```bash
> Could not expand ZIP 'F:\workspace\rn\node_modules\jpush-react-native\android\build\outputs\aar\jpush-react-native-release.aar'.
```
解决:
问题是使用命令行窗口时缺少权限，不能解压文件。
解决办法是以管理员身份运行命令，删除`...\node_modules\jpush-react-native\android\build`，`...\node_modules\jcore-react-native\android\build\`和`...\android\app\build\`，然后尝试重新运行

![管理员身份运行命令.png](http://upload-images.jianshu.io/upload_images/3762216-d996f87276aa125d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

2. 
```bash
> ... set canOverrideExistingModule=true
```
解决: 
问题是在`/android/app/src/java/.../MainApplication.java`的`getPackages()`中重复引用了某个package，删除掉重复内容即可

更多高级应用查看[官方说明][jpush-api]


[jpush-react-native]: https://github.com/jpush/jpush-react-native
[jpush-api]: https://github.com/jpush/jpush-react-native#api

React Native

React Native 集成极光推送 jpush-react-native


更新时间：2018-03-03

修复因 React Navigation 更新引起的 <font color="red">`addListener is not  a function`</font> 的问题。
- - - - --
[react-navigation](https://reactnavigation.org/docs/intro/) 是 React Native 官方推荐的导航库。[redux](https://redux.js.org/) 是一个状态容器，redux 的简单使用可参考阮一峰的 [Redux 入门教程](http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html)，现在网上也有很多中文文档。

在 React Navigation 最新版本中需要添加 `react-navigation-redux-helpers` 包
```bash
$ yarn add react-native-navigation-redux-helpers
# 或者 npm install --save react-native-navigation-redux-helpers
```
### 首先写 redux helper 工具 `redux.js`
```js
import {
    createReactNavigationReduxMiddleware,
    createReduxBoundAddListener
} from 'react-navigation-redux-helpers';

// 注意: createReactNavigationReduxMiddleware 必须在 createReduxBoundAddListener 之前执行
const middleware = createReactNavigationReduxMiddleware('root', state => state.nav,);

const addListener = createReduxBoundAddListener('root');

export {
    middleware,
    addListener
};
```

### 首先写一个 navigator
```js
export const AppNavigator = StackNavigator({
    Home: { screen: HomeTab },  // 这是一个 TabNavigator
    Details: { screen: DetailPage },  // 简单的页面
  });
```

集成 Redux 主要含三部分：Store，Action，Reducer

![Redux](http://upload-images.jianshu.io/upload_images/3762216-ce7c29ca1d694ed5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/800)

### Action
```js
export function getBanners() {
    return dispatch => {
        // request 是我自己封装的网络请求方法
        request({
            url: apis.BANNER  // 常量 API 地址
        }).then(res => {
            dispatch({
                type: actionTypes.BANNER,  // 常量行为类型
                data: res
            })
        })
    }
}
```

### Reducer
1.  othersReducer.js
```js
// 初始 state
const initState = {
    banners: [],
    articles: [],
    loading: false
}

export default function discoveryData(state=initState, action) {
    switch(action.type) {
        case actionTypes.BANNER:
            return {...state, banners:action.data, loading:false}
        default:
            return state;
    }
}
```
2. navReducer.js 用于导航
```js
import { AppNavigator } from '../navigators/AppNavigator';
import { NavigationActions } from 'react-navigation';
// Home 是个 TabNavigator，在这里 firstAction 为 null，会导致后续程序会出错，所以自己手写了一个 action
const firstAction = AppNavigator.router.getActionForPathAndParams('Home') || {
    type: 'Navigation/NAVIGATE',
    touteName: 'Home'
};
const initialNavState = AppNavigator.router.getStateForAction(firstAction);
const navReducer = (state = initialNavState, action) => {
    const nextState = AppNavigator.router.getStateForAction(action, state);
    return nextState || state;
}

export default navReducer;
```
在以前版本里，我是把 firstAction 和 initialNavState 注释掉了，如果不注释掉会在 getStateForAction 时报 `undefined` 错误
![undefined](http://upload-images.jianshu.io/upload_images/3762216-a738f6219e7475a0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/400)
解决方案多种：
一种是将 TabNavigator 放在单纯的 Component 中作为 StackNavigator 的 screen，这样就可以使用 initialNavState了，弊端是不方便从其它页面跳转到  TabNavigator 的指定 Tab 页。
另一种就是我现在使用的方案了。
如果你有更好的解决方案请告诉我！！

在新版本中不再出现上述问题，而是出现代码中提到的 null 问题
3. 整合 Reducer
```js
import { combineReducers } from 'redux';
import navReducer from './navReducer';
import othersReducer from './othersReducer';

const AppReducer = combineReducers({
    nav: navReducer,
    othersReducer
});

export default AppReducer;
```

### 配置 Store
```js
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';  // 中间件
import reducers from './../reducers';  // 整合后的 Reducer
import { middleware } from './redux';  // redux helper

const configStore = applyMiddleware(thunkMiddleware, middleware)(createStore)

export default configStore(reducers);
```

### 自定义 Navigator
```js
import { connect } from 'react-redux';
import { addNavigationHelpers, NavigationActions } from 'react-navigation';
import { addListener } from './redux';

class AppWithNavigationState extends Component {

  componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.onBackPress)
  }

  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.onBackPress)
  }

  onBackPress = () => {
    const { dispatch, nav } = this.props;
    dispatch(NavigationActions.back())
    return !(nav.index===0)
  }

  render() {
    return (
      <AppNavigator 
        navigation={addNavigationHelpers({ 
          dispatch: this.props.dispatch,
          state: this.props.nav,
          addListener  // 关键所在
        })} 
      />
    )
  }
}

const mapStateToProps = state => ({
  nav: state.nav,
});

export default connect(mapStateToProps)(AppWithNavigationState);
```

### 绑定到应用中
在入口文件中绑定 Redux 的 store 管理库
```js
import { Provider } from 'react-redux';
import store from './src/store';

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <AppWithNavigationState />
      </Provider>
    );
  }
}
```
所有源码我已经放到了 GitHub [查看源码](https://github.com/Hongye567/react-native-mark)


Windows 使用 CapsLock 切换中英文模式

Linux 查看和修改时区

Apache Virtual Host

React Native 集成极光推送 jpush-react-native

React Navigation 集成 Redux