关于react-native-zss-rich-text-edi

按照eact-native-zss-rich-text-editor 操作先下载这个模块

1、npm i --save react-native-zss-rich-text-editor
2、安装README.md说明：
修改安卓项目下的android/app/build.gradle文件：

project.afterEvaluate {
    apply from: '../../node_modules/react-native-zss-rich-text-editor/htmlCopy.gradle';
    copyEditorHtmlToAppAssets(file('../../node_modules/react-native-zss-rich-text-editor'))
} 

这时如果你直接用了这个模块的话，你会发现他一直报无法读取NavigationType属性。（因为它依赖于react-native-webview-bridge-updated这个库）
解决办法：

iOS

1. 用 xcode's 打开你自己的IOS项目

image

2. 点击你项目的Libraries目录
3. 选择 Add Files to ..

image

4.找到你项目的node_modules目录下得response -native-webview-bridge中IOS目录，把React-Native-Webview-Bridge.xcodeproj添加IOS项目中

image

5.点击你的IOS根目录，选到Build Phases下

image

6. 添加你刚刚导入的那个库

image

8. 重新编译，IOS就可以用了

Android

1. 添加以下代码到MainApplication.java`文件下(RN 小于 0.29的）

import com.github.alinz.reactnativewebviewbridge.WebViewBridgePackage;

2. 添加以下代码到MainApplication.java文件下

protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
                new WebViewBridgePackage() //<- this
        );
    }

3. 添加以下代码到你的android/setting.gradle文件下，记得有项目依赖的话，就不用重复添加了

include ':app', ':react-native-webview-bridge'
project(':react-native-webview-bridge').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview-bridge/android')

4. 添加以下代码到你的android/app/build.gradle文件下

compile project(':react-native-webview-bridge')

5. 全部完成，你可以用安卓接着飙车了

你在使用官方的示例时会发现以下问题

1、输入框滚动条

修改node_modules下的editor.html文件,修改样式：

html,body{
            overflow-x: hidden;
            overflow-y: auto;
            width: 97%;
            height: 100%;
        }

        div.zss_editor_content {
            font-family: Arial, Helvetica, sans-serif;
            color: #000;
            width: 100%;
            height: 100%;
            -webkit-overflow-scrolling: touch;
            overflow-x: hidden;
            overflow-y: auto;
        }
 #zss_editor_content {
            /*padding-left: 20px;*///注释掉，不然会出排版问题
            /*padding-right: 10px;*///注释掉，不然会出排版问题
        }

2、 内容后滚问题，下沉问题

<RichTextEditor
          ref={(r) => this.richtext = r}
          style={styles.richText}
          initialContentHTML={'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>'}
          editorInitializedCallback={() => this.onEditorInitialized()}
          editorInitializedCallback={() => {
            //解决内容后滚问题
            this.richtext.setEditorHeight(75);
           //打开后直接聚焦输入框
            this.richtext.focusContent(true)
          }}
        />

3、使用了隐藏标题方法，但是每次打开还是会有一闪而过的标题输入框，修改editor.html的样式

 #separatorContainer {
            display: none;//默认隐藏
            -webkit-user-select: none;
            padding-left: 10px;
            padding-right: 10px;
        }

 #zss_editor_title {
            display: none;//默认隐藏
            padding-left: 10px;
            padding-right: 10px;
        }

暂时就遇到这么多了。

至于api啥的，直接看下面的参数和const.js文件的方法列表

 static propTypes = {
    initialTitleHTML: PropTypes.string,
    initialContentHTML: PropTypes.string,
    titlePlaceholder: PropTypes.string,
    contentPlaceholder: PropTypes.string,
    editorInitializedCallback: PropTypes.func,
    customCSS: PropTypes.string,
    hiddenTitle: PropTypes.bool,
    enableOnChange: PropTypes.bool,
    footerHeight: PropTypes.number,
    contentInset: PropTypes.object
  };