我们如何在 TextInput 组件 React Native 中加粗一些单词?
How we can bold some words in TextInput component React Native?
我想要 textInput 中的一些功能,比如如果我们写 hello,那么 hello 应该在 textinput 中加粗,其余的单词将是正常的。有人可以帮我解决吗?
它与下文link.
中提到的Text Component有所不同
您将必须制作自定义 textInput 组件,如下所示:
const [txt,setTxt] = useState("");
<Pressable>
<TextInput placeholder="Type Something..." onChangeText={(value)=>setTxt(value)}/>
<View style={{flexDirection: 'row'}}>
{txt.split(" ").map((text)=><Text style={{fontWeight:text == "bold"?'bold':null}}>{text+" "}</Text>)}
</View>
</Pressable>
将 text == "bold"
替换为您想要加粗的任何值。
编辑:如果您想将多个单词设为粗体,请将它们分组到一个数组中并像这样更新您的条件:
const anArrayOfBoldStrings = ["bold","hello","Whosebug"];
<Pressable>
<TextInput placeholder="Type Something..." onChangeText={(value)=>setTxt(value)}/>
<View style={{flexDirection: 'row'}}>
{txt.split(" ").map((text)=><Text style={{fontWeight:text == anArrayOfBoldStrings.includes(text?'bold':null}}>{text+" "}</Text>)}
</View>
</Pressable>
我想要 textInput 中的一些功能,比如如果我们写 hello,那么 hello 应该在 textinput 中加粗,其余的单词将是正常的。有人可以帮我解决吗?
它与下文link.
中提到的Text Component有所不同
您将必须制作自定义 textInput 组件,如下所示:
const [txt,setTxt] = useState("");
<Pressable>
<TextInput placeholder="Type Something..." onChangeText={(value)=>setTxt(value)}/>
<View style={{flexDirection: 'row'}}>
{txt.split(" ").map((text)=><Text style={{fontWeight:text == "bold"?'bold':null}}>{text+" "}</Text>)}
</View>
</Pressable>
将 text == "bold"
替换为您想要加粗的任何值。
编辑:如果您想将多个单词设为粗体,请将它们分组到一个数组中并像这样更新您的条件:
const anArrayOfBoldStrings = ["bold","hello","Whosebug"];
<Pressable>
<TextInput placeholder="Type Something..." onChangeText={(value)=>setTxt(value)}/>
<View style={{flexDirection: 'row'}}>
{txt.split(" ").map((text)=><Text style={{fontWeight:text == anArrayOfBoldStrings.includes(text?'bold':null}}>{text+" "}</Text>)}
</View>
</Pressable>