如何在react-native-pell-react编辑器中使用RichEditor工具栏的图标映射？

Question

我想为RichEditor中的文本添加下划线和左、右、居中对齐，但工具栏中只有默认按钮。有一个道具呼叫图标地图，但不知道如何使用它。

<View style={{
  height: 250, width: '90%', borderRadius: 5, borderWidth: 0.6, borderColor: 'lightgrey',
  alignItems: 'flex-start', flexDirection: 'column', justifyContent: 'center', backgroundColor: 'rgb(242,240,244)', marginLeft: 20
}}>
  <View style={{ flex: 1, }}>
    <RichEditor
      ref={(r) => this.richtext = r}
      initialContentHTML={this.bizDetailsEditorVal}
      keyboardDisplayRequiresUserAction={true}
      onMessage={(s) => {
        console.log(s)
      }}
      style={{
        // minHeight:Platform.OS === 'ios' ? 30 : 40,
        // maxHeight:Platform.OS === 'ios' ? 100: 40,
        height: '100%',
        backgroundColor: 'white',
        flex: 1, justifyContent: 'center',
        minWidth: '100%', width: '100%'
      }}
    />
  </View>
  <View style={{ width: '100%' }}>
    <RichToolbar
      getEditor={() => this.richtext} />
  </View>

Answer 1

你可以像下面这样做一些事情

RichToolbar editor={richText}
    actions={[
        actions.keyboard,
        actions.setBold,
        actions.setItalic,
        actions.setUnderline,
        actions.setStrikethrough,
        actions.heading1,
        actions.heading2,
        actions.heading3,
        actions.insertBulletsList,
        actions.insertOrderedList,
        actions.undo,
        actions.redo,
        actions.removeFormat
    ]}
    iconMap={{
        [actions.heading1]: ({ tintColor }) => (<Text style={[styles.tib, { color: tintColor }]}>H1</Text>),
        [actions.heading2]: ({ tintColor }) => (<Text style={[styles.tib, { color: tintColor }]}>H2</Text>),
        [actions.heading3]: ({ tintColor }) => (<Textstyle={[styles.tib, { color: tintColor }]}>H3</Text>),
    }}
/>