- npm install
- npm run watch 生成打包文件，在浏览器打开index.html，预览效果
本项目开发建立在可汗学院的math-input基础之上（[传送门]）(https://github.com/Khan/math-input)。在此基础上添加了：
- 1.手写识别功能（识别接口为私有接口）
- 2.改变了页面布局（原54改为64，原2 tab 改为6tab）
- 3.去掉了全键盘模式
- 4.将输入框宽度调整，高度固定，光标居中
- 5.加载结束光标自动聚焦到输入状态
- 6.暴露组件到index.html，在index去操作组件，取值并与Native交互（Native端交互细节为美国大佬所写）
- 修改的是expression-keypad.js，已有onePage和six-Page，若要新增，需在加一个和其他tab页相同结构，如sevenPage，同时将numPages加1：numPages = 7
- 在two-page-keypad.js（当然也可以重新建一个在seven-page-keypad.js），引入sevenPage，使用sevenPage，代码如下：
// 修改默认节点数量
static propTypes = {
currentPage: React.PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]).isRequired,
sevenPage: React.PropTypes.node.isRequired,
sixPage: React.PropTypes.node.isRequired,
fivePage: React.PropTypes.node.isRequired,
fourPage: React.PropTypes.node.isRequired,
threePage: React.PropTypes.node.isRequired,
paginationEnabled: React.PropTypes.bool.isRequired,
twoPage: React.PropTypes.node.isRequired,
onePage: React.PropTypes.node.isRequired,
};
// 引入
const {
currentPage,
sevenPage
sixPage,
fivePage,
fourPage,
854B
threePage,
twoPage,
paginationEnabled,
onePage,
} = this.props;
// 使用
<View style={styles.borderTop}>
<ViewPager>
{sevenPage}
{sixPage}
{fivePage}
{fourPage}
{threePage}
{twoPage}
{onePage}
</ViewPager>
</View>
- 修改view-pager.js，新增tab。
return <View style={pagerStyle} dynamicStyle={dynamicPagerStyle}>
<View dynamicStyle={dynamicPageStyle}>
{children[0]}
</View>
<View style={styles.rightPage} dynamicStyle={dynamicPageStyle}>
{children[1]}
</View>
{/* 新增第三个tab */}
<View dynamicStyle={dynamicPageStyle}>
{children[2]}
</View>
{/* 新增第四个tab */}
<View dynamicStyle={dynamicPageStyle}>
{children[3]}
</View>
{/* 新增第五个tab */}
<View dynamicStyle={dynamicPageStyle}>
{children[4]}
</View>
{/* 新增第六个tab */}
<View dynamicStyle={dynamicPageStyle}>
{children[5]}
</View>
{/* 新增第七个tab */}
<View dynamicStyle={dynamicPageStyle}>
{children[5]}
</View>
</View>;
// 修改样式(宋霖)
twoPagePager: {
alignSelf: 'flex-start',
// Note: By default, <View> sets a `maxWidth` of 100% to fix some
// Flexbox bugs. We have to override it to accommodate for our two
// pages. The exact value here isn't super important, as long as it's
// large enough to accommodate for two pages (so, 200%) and some
// separators.
// 2tab用,这是我没发现的关键点，美国那边帮助下发现的关键，如果2个tab需要>200%,3个>300%
// maxWidth: '250%',
// 7tab用
maxWidth: '850%'
}
- 新建一个svg组件： 位置在components/iconography/cos1.js，这个文件是现实按钮图片的svg
- 修改iconography文件的index： components/iconography/index.js, iconography下方的所有公式的svg组件，index是做统一导出
COS1:require('./cos1')
- 修改符号注册文件： data/keys.js
COS1:'COS1',
- 定义新符号的属性。修改文件： data/key-configs.js
[Keys.COS1]: {
type: KeyTypes.OPERATOR,
ariaLabel: i18n._('Always-equal cos'),
},
-
修改文件：components/input/math-wrapper.js，math-wrapper.js里面包含了几乎所有符号的LaTeX编码 但是不同类型的公式修改地方和方法好事不一样，如cos就做了特殊处理，加了括号，我直接用了cos的代码
-
以上步骤已将将新加的公式符号svg,Latex编码都准备好了，现在需要引入到页面, 渲染公式键盘位置：components/expression-keypad.js, expression-keypad.js修改能替换和添加公式， 新增一列就是在page下新增一个大的view，里面5个具体公式，添加一行则需要在page下每个列去添加一个具体公式
<TouchableKeypadButton
keyConfig={KeyConfigs.COS1}
borders={BorderStyles.NONE}
/>
具体修改的文件见： https://github.com/wangchao117/m-i-edit/commit/eae546cf1cc6612a6e462b71ae09681233c8e4d5
此类型公式不是一般公式都能这样做，只有特定类型的能，参照math-wrapper.js（72-81）行
由于第一次接触并改react项目，对math-input的一些具体运行机制理解不是特别到位，所以存在很多自己并不是特别明白的地方，虽然改到符合产品要求，但自己并不知道为什么生效，如果对项目有疑问，欢迎ISSUE。