(React Native) 组件异常 - 文本字符串必须在 <Text> 组件中呈现
(React Native) Component Exception - Text Strings must be rendered within a <Text> component
我正在用 React Native 开发一个应用程序,我有一些代码可以在网络和 iOS 上运行,但不适用于 android。我不断收到标题中所述的错误,我不确定为什么......基本上该函数采用布尔数组,并且 returns 是这些标志所代表内容的图形表示(密码策略)。错误标志 return 红色文本和真实标志 return 绿色文本。该应用程序会编译并且不会崩溃,直到函数为 运行。请指教
function displayPwPolicy(flags) {
var policies = [
"Be 8~256 characters long",
"Have uppercase character(s)",
"Have lowercase character(s)",
"Have numerical character(s)",
"Have special character(s)",
"Have no invalid characters"
]
return (
<View>
<Text style={styles.homePwPolicy}>*Your password must:</Text>
{
policies.map( (policy, i) =>
<Text key={'policy00' + i} style={{ color: flags[i] ? 'green' : 'red' }}>
{(flags[i] ? '✔':'✘') + '\t ' + policy}
</Text>
)
}
</View>
)
}
调用堆栈:https://photos.app.goo.gl/1G2JKUiYJqsLVHoz5
编辑 1: 这是函数调用。如果删除该行,该应用程序可以正常工作
<TextInput
style = {styles.homeInput}
value = {userLast}
placeholder = 'Last Name'
onChangeText = {last => setUserLast(last)}
/>
{ pwPolicyShown && displayPwPolicy(pwPolicyFlags) }
<TouchableOpacity style={styles.homeButtons}>
<Text style={styles.homeButtonText}>
CREATE ACCOUNT
</Text>
</TouchableOpacity>
由于 dulmandakh 在 github 上的另一个 post 解决了这个问题。问题在于函数调用的条件渲染。如果不与比较运算符配对,某些平台显然会尝试呈现正在评估的变量。必须将“pwPolicyShown”更改为“pwPolicyShown == true”。
我正在用 React Native 开发一个应用程序,我有一些代码可以在网络和 iOS 上运行,但不适用于 android。我不断收到标题中所述的错误,我不确定为什么......基本上该函数采用布尔数组,并且 returns 是这些标志所代表内容的图形表示(密码策略)。错误标志 return 红色文本和真实标志 return 绿色文本。该应用程序会编译并且不会崩溃,直到函数为 运行。请指教
function displayPwPolicy(flags) {
var policies = [
"Be 8~256 characters long",
"Have uppercase character(s)",
"Have lowercase character(s)",
"Have numerical character(s)",
"Have special character(s)",
"Have no invalid characters"
]
return (
<View>
<Text style={styles.homePwPolicy}>*Your password must:</Text>
{
policies.map( (policy, i) =>
<Text key={'policy00' + i} style={{ color: flags[i] ? 'green' : 'red' }}>
{(flags[i] ? '✔':'✘') + '\t ' + policy}
</Text>
)
}
</View>
)
}
调用堆栈:https://photos.app.goo.gl/1G2JKUiYJqsLVHoz5
编辑 1: 这是函数调用。如果删除该行,该应用程序可以正常工作
<TextInput
style = {styles.homeInput}
value = {userLast}
placeholder = 'Last Name'
onChangeText = {last => setUserLast(last)}
/>
{ pwPolicyShown && displayPwPolicy(pwPolicyFlags) }
<TouchableOpacity style={styles.homeButtons}>
<Text style={styles.homeButtonText}>
CREATE ACCOUNT
</Text>
</TouchableOpacity>
由于 dulmandakh 在 github 上的另一个 post 解决了这个问题。问题在于函数调用的条件渲染。如果不与比较运算符配对,某些平台显然会尝试呈现正在评估的变量。必须将“pwPolicyShown”更改为“pwPolicyShown == true”。