按照 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
用 xcode's 打开你自己的 iOS 项目
image
点击你项目的 Libraries 目录
选择 Add Files to ..
image
4. 找到你项目的 node_modules 目录下得 response -native-webview-bridge 中 iOS 目录, 把 React-Native-Webview-Bridge.xcodeproj 添加 iOS 项目中
image
5. 点击你的 iOS 根目录, 选到 Build Phases 下
image
添加你刚刚导入的那个库
image
重新编译, iOS 就可以用了
Android
添加以下代码到 MainApplication.java` 文件下 (RN 小于 0.29 的)
import com.GitHub.alinz.reactnativewebviewbridge.WebViewBridgePackage;
添加以下代码到 MainApplication.java 文件下
- protected List<ReactPackage> getPackages() {
- return Arrays.<ReactPackage>asList(
- new MainReactPackage(),
- new WebViewBridgePackage() //<- this
- );
- }
添加以下代码到你的 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')
添加以下代码到你的 Android/App/build.gradle 文件下
compile project(':react-native-webview-bridge')
全部完成, 你可以用安卓接着飙车了
你在使用官方的示例时会发现以下问题
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
- };
来源: http://www.jianshu.com/p/037e9a9c619a