react-native - 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 斜体。

Screen

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

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

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

Answer 1

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

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

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