react native 在运行时使 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>
    );
  }
}

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

屏幕

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

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

如果我们不能有不同的 TextInput 样式，那么有什么替代方法可以使（某种 TextInput）粗体、斜体、更大、更小...

Answer 1

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

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

只需解析文本并根据需要附加不同样式的文本即可。