在运行时将本机使TextInput的一部分变为粗体或斜体

Question

我有一个简单的TextInput应用，如下所示：

export default class App extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = { textValue: '' };
    this.handleTextInputChange = this.handleTextInputChange.bind(this);
  }

  handleTextInputChange(input) {
    this.setState({textValue: input})
  }

  render() {
    return (
      <KeyboardAvoidingView
         behavior="padding"
         style={{flex:1}}
         enabled>
        <TextInput
          style={styles.textInputStyle}
          multiline={true}
          onChangeText={this.handleTextInputChange}
          value={this.state.textValue}
        />
      </KeyboardAvoidingView>
    );
  }
}

我想做的是，当我在TextInput中编写##hello时，在TextInput屏幕中即时呈现的内容是hello，以粗体显示，就像在Dropbox Paper中进行Markdown编辑一样。同样，当我写_hello_时，我在屏幕上看到的都是斜体。

Screen

我可以这样做吗？ （让TextInput的一部分具有不同的样式）

到目前为止，看来TextInput只能采用一种样式？

如果我们不能使用其他样式的TextInput，则可以作为一部分（某种TextInput）的粗体，斜体，更大，更小...

Answer 1

我很确定您可以像这样在TextInput中嵌套文本：

<TextInput>
    <Text style={{fontWeight:'bold'}}>I'm bold</Text>
</TextInput>

只需解析文本并根据需要添加具有不同样式的文本。

Answer 2

您可以使用this lib react-native-easy-markdown来渲染降价文本，并隐藏这样的文本输入，然后渲染降价组件。 ：

import React, { Component } from 'react';
import { StyleSheet, View, TextInput, TouchableOpacity } from 'react-native';
import Markdown from 'react-native-easy-markdown';

export default class App extends Component {
  state = { text: 'type here ...' };
  onClick = e => {
    this.textInput.focus();
  };
  render() {
    return (
      <View style={styles.container}>
        <TextInput
          ref={ref => (this.textInput = ref)}
          style={{ position: 'absolute', left: -1000, top: -1000 }}
          onChangeText={text => this.setState({ text })}
        />
        <TouchableOpacity onPress={this.onClick}>
          <Markdown>{this.state.text}</Markdown>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

这是代码的演示：