Fai*_*ire 1 react-native styled-components
一个实现样式化组件和滚动视图的 react-native 应用程序正在运行,但给了我这个警告:
index.js:1 Warning: React does not recognize the `enterKeyHint` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `enterkeyhint` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in input (created by TextInput)
in TextInput (created by Context.Consumer)
in StyledNativeComponent (created by Styled(TextInput))
in Styled(TextInput) (at Signup.js:96)
in div (created by View)
in View (created by ScrollView)
in div (created by View)
in View (created by ForwardRef)
in ForwardRef (created by ScrollView)
in ScrollView (at Signup.js:95)
Run Code Online (Sandbox Code Playgroud)
这是组件的渲染:
return (
<BasicView>
{isLoading && <Preloader/>}
<ScrollView>
LOC 96 -> <BasicInput placeholder="email" value={email} onChangeText={(val) => setEmail(val)}/>
<BasicInput placeholder="password" value={password} onChangeText={(val) => setPassword(val)}
maxLength={15} secureTextEntry={true}/>
<BasicInput placeholder="name" value={displayName} onChangeText={(val) => setDisplayName(val)}/>
<Button title="Signup" onPress={() => registerUser()}/>
<BasicLink onPress={() => props.navigation.navigate(NavigationLocations.LOGIN)}>
Already registered? Click here to log in...
</BasicLink>
</ScrollView>
</BasicView>
)
Run Code Online (Sandbox Code Playgroud)
这是样式组件的定义:
export const BasicInput = styled.TextInput`
width: 100%;
margin-bottom: 15px;
padding-bottom: 15px;
align-self: center;
border-color: #ccc;
border-bottom-width: 1px;
`;
Run Code Online (Sandbox Code Playgroud)
什么是enterKeyHint指什么?我应该实施什么更正?
小智 6
问题来自 React Native Web。不确定在哪个版本中出现。无论如何,我回到了 0.12.3 版,我再也没有收到此警告。
enterKeyHint 是用于虚拟键盘的 html 属性。这是一种重命名 [ENTER] 键的方法。 https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/enterKeyHint
该警告不会出现在 Andoid 或 iOS 上。因此,如果您不愿意降级 React Native Web 版本,则可以放心地忽略此警告,因为您很可能不需要重命名 Web 上虚拟键盘上的 [ENTER] 键。
| 归档时间: |
|
| 查看次数: |
2444 次 |
| 最近记录: |