説明なし

app.js 1.4KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. import React, { Component } from 'react';
  2. import {
  3. StyleSheet,
  4. Text,
  5. View
  6. } from 'react-native';
  7. import {RichTextEditor, RichTextToolbar} from 'react-native-ZSSRichTextEditor'
  8. import KeyboardSpacer from 'react-native-keyboard-spacer';
  9. export default class RichTextExample extends Component {
  10. constructor(props) {
  11. super(props);
  12. this.getHTML = this.getHTML.bind(this);
  13. }
  14. render() {
  15. return (
  16. <View style={styles.container}>
  17. <RichTextEditor
  18. ref={(r)=>this.richtext = r}
  19. style={styles.richText}
  20. initialTitleHTML={'Title!!'}
  21. initialContentHTML={'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>'}
  22. />
  23. <RichTextToolbar
  24. getEditor={() => this.richtext}
  25. />
  26. <KeyboardSpacer/>
  27. </View>
  28. );
  29. }
  30. async getHTML() {
  31. const titleHtml = await this.richtext.getTitleHtml();
  32. const contentHtml = await this.richtext.getContentHtml();
  33. //alert(titleHtml + ' ' + contentHtml)
  34. }
  35. componentDidMount() {
  36. setTimeout(()=>{
  37. this.getHTML();
  38. }, 3000);
  39. }
  40. }
  41. const styles = StyleSheet.create({
  42. container: {
  43. flex: 1,
  44. flexDirection: 'column',
  45. backgroundColor: '#F5FCFF',
  46. paddingTop: 40
  47. },
  48. richText: {
  49. alignItems:'center',
  50. justifyContent: 'center',
  51. backgroundColor: 'transparent',
  52. },
  53. });