ReactNative中，参考官网：
去使用TextInput，结果代码：
import React from ‘react’; import { StyleSheet, Text, View, TextInput } from ‘react-native’; export default class App extends React.Component { constructor(props) { super(props); this.state = { text: ” }; } render() { return ( <View style={styles.container}> <Text>此处已经可以正常编辑App.js去查看自动刷新效果了</Text> <Text>Open up App.js to start working on your app!</Text> <Text>你的姓名：{this.state.text}</Text> <TextInput style={ { height: 40, borderColor: ‘green’, borderWidth: 1, width: 300, padding: 0, placeholder: ‘请输入’ } } onChangeText={(text) => this.setState({text})} value={this.state.text} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: ‘#fff’, alignItems: ‘center’, justifyContent: ‘center’, }, }); |
出错：
15:13:58: Warning: Failed prop type: Invalid props.style key `placeholder` supplied to `TextInput`. Bad object: { "height": 40, "borderColor": "green", "borderWidth": 1, "width": 300, "padding": 0, "placeholder": "请输入" } Valid keys: [ "display", "width", "height", "top", "left", "right", "bottom", "minWidth", "maxWidth", "minHeight", "maxHeight", "margin", "marginVertical", "marginHorizontal", "marginTop", "marginBottom", "marginLeft", "marginRight", "padding", "paddingVertical", "paddingHorizontal", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "borderWidth", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "position", "flexDirection", "flexWrap", "justifyContent", "alignItems", "alignSelf", "alignContent", "overflow", "flex", "flexGrow", "flexShrink", "flexBasis", "aspectRatio", "zIndex", "direction", "shadowColor", "shadowOffset", "shadowOpacity", "shadowRadius", "transform", "transformMatrix", "decomposedMatrix", "scaleX", "scaleY", "rotation", "translateX", "translateY", "backfaceVisibility", "backgroundColor", "borderColor", "borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "borderStyle", "opacity", "elevation", "color", "fontFamily", "fontSize", "fontStyle", "fontWeight", "fontVariant", "textShadowOffset", "textShadowRadius", "textShadowColor", "letterSpacing", "lineHeight", "textAlign", "textAlignVertical", "includeFontPadding", "textDecorationLine", "textDecorationStyle", "textDecorationColor", "writingDirection" ] in TextInput (at App.js:21) in App (created by AwakeInDevApp) in RCTView (at View.js:113) in View (created by AwakeInDevApp) in AwakeInDevApp (at registerRootComponent.js:36) in RootErrorBoundary (at registerRootComponent.js:35) in ExpoRootComponent (at renderApplication.js:35) in RCTView (at View.js:113) in View (at AppContainer.js:100) in RCTView (at View.js:113) in View (at AppContainer.js:121) in AppContainer (at renderApplication.js:34) – node_modules/fbjs/lib/warning.js:33:20 in printWarning – node_modules/fbjs/lib/warning.js:57:25 in warning – node_modules/prop-types/checkPropTypes.js:52:18 in checkPropTypes – node_modules/react/cjs/react.development.js:1736:21 in validatePropTypes – node_modules/react/cjs/react.development.js:1789:22 in createElement * App.js:21:8 in render – node_modules/react-native/Libraries/Renderer/ReactNativeStack-dev.js:1863:19 in <unknown> – node_modules/react-native/Libraries/Renderer/ReactNativeStack-dev.js:1610:15 in measureLifeCyclePerf – … 58 more stack frames from framework internals |
很明显是：
提示TextInput中没有placeholder这个属性。
以为是版本搞错了呢。
因为官网最新的是0.49，而我自己此处package.json中是：
"react": "16.0.0-alpha.12",
"react-native": "^0.48.4”
0.48的版本，所以去看0.48版本的文档：
但是也还是有
placeholder?: node The string that will be rendered before text input has been entered. |
的啊。
不过奇怪的是，placeholder是个node类型，而不是一般的string类型。
react native node type
Warning: Failed prop type: Invalid props.style key placeholder supplied to TextInput
然后自己注意到了：
此处，搞错了，把placeholder，放在了style参数里面了。。。
所以改为：
<TextInput style={ { height: 40, borderColor: ‘green’, borderWidth: 1, width: 300, padding: 0 } } placeholder=’请输入’ onChangeText={(text) => this.setState({text})} value={this.state.text} /> |
然后就正常了：
【总结】
此处，在ReactNative中使用TextInput组建，传递参数时，不小心把单独的placeholder这个参数，放在了style参数里面了，所以报错，找不到。
改为正常的参数传递进去：
<TextInput style={ { height: 40, borderColor: ‘green’, borderWidth: 1, width: 300, padding: 0 } } placeholder=’请输入’ onChangeText={(text) => this.setState({text})} value={this.state.text} /> |
就可以了。
转载请注明：在路上 » 【已解决】reactnative中TextInput出错：Warning: Failed prop type: Invalid props.style key placeholder supplied to TextInput