最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】reactnative中TextInput出错:Warning: Failed prop type: Invalid props.style key placeholder supplied to TextInput

React Native crifan 1562浏览 0评论

ReactNative中,参考官网:

TextInput – React Native

去使用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版本的文档:

TextInput

但是也还是有

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

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
63 queries in 0.133 seconds, using 18.80MB memory