添加 href phone link 到 TextInput

Question

我目前在 React Native 应用程序中有以下内容：

                 <TextInput
                   style={styles.input}
                   placeholder="Phone"
                   value={formState.phone}
                 />

上面的值是一个 phone 号码我怎样才能把它变成这个值文本输入是一个 href 或 link 用户可以点击并拨出的地方？

从一些答案中，我看到托管工作流中有来自 expo 的“链接”。给出的例子是：

  <Text {...this.props} onPress={this._handlePress}>
    {this.props.children}
  </Text>

我怎样才能使用链接或任何其他方法来实现此目的？

Answer 1

import { Linking } from "react-native";

_handlePress() {
  Linking.openURL(`tel:${phoneNumber}`);
}

Answer 2

您也可以使用 Parsed Text。

  handlePhonePress = (url) => {
      Linking.openURL(url);
  }
   <ParsedText
      style={styles.text}
      parse={
        [
          {type: 'phone', style: styles.phone, onPress: this.handlePhonePress},
        ]
      }
    >
      ...
    </ParsedText>

通过这样做，您的 phone 号码也将接受样式，例如你可以把它设为下划线和蓝色

添加 href phone link 到 TextInput

Add href phone link to a TextInput

react-native