reactnative props用法

痛定思痛。 2022-05-24 12:10 270阅读 0赞

组件定义每个单词的首字母要大写

在APP.js里调用

  1. import PropsTest from './propsTest';
  2. 以及在render函数里调用子组件
  3. render() {
  4. return (
  5. <View style={styles.container}>
  6. <PropsTest
  7. name="熊爱明"
  8. />
  9. </View>
  10. );
  11. }

在子组件里申明

  1. export default class PropsTest extends Component{
  2. render () {
  3. return <Text style={
  4. {
  5. fontSize:20,backgroundColor:'red'}}>Hello+{
  6. this.props.name}</Text>
  7. }
  8. }

传递默认属性

在propsTest.js

别忘记加

  1. static修饰符
  2. export default class PropsTest extends Component{
  3. 设置默认属性
  4. static defaultProps={
  5. name:'小红'}
  6. render () {
  7. return <Text style={
  8. {
  9. fontSize:20,backgroundColor:'red'}}>Hello+{
  10. this.props.name}</Text>
  11. }
  12. }

20180526222215207

前提没有在APP.js里申明变量

对变量的属性检查

首先先下载

npm install prop-types —save字体库包

引入

  1. import PropsTest from './propsTest';
  2. static propTypes={
  3. name:String
  4. }
  5. static propTypes={
  6. name:String,
  7. age:Number,
  8. sex:PropTypes.string.isRequired
  9. }
  10. <Text style={
  11. {
  12. fontSize:20,backgroundColor:'red'}}>Hello+{
  13. this.props.sex}</Text>

延展操作符

  1. var p={
  2. name:'王依米',
  3. age:16,
  4. sex:'女'}
  5. return (
  6. <View style={styles.container}>
  7. <PropsTest
  8. name={p.name}
  9. age={p.age}
  10. sex={p.sex}
  11. // name='王依米'
  12. // age={16}
  13. // sex='女'
  14. />
  15. </View>
  16. );
  17. }
  18. var p={
  19. name:'王依米',
  20. age:16,
  21. sex:'女'}
  22. return (
  23. <View style={styles.container}>
  24. <PropsTest
  25. //延展操作符
  26. {...p}
  27. // name={p.name}
  28. // age={p.age}
  29. // sex={p.sex}
  30. // name='王依米'
  31. // age={16}
  32. // sex='女'
  33. />
  34. </View>
  35. );
  36. }
  37. {...p} 一下就把属性传递过去了
  38. {
  39. /*{...p}*/}不是被注销的意思
  40. state的应用
  41. export default class State extends Component{
  42. state ={
  43. size:80
  44. }
  45. constructor (props) {
  46. super(props);
  47. }
  48. render () {
  49. return (
  50. <View>
  51. <Text
  52. style={
  53. {
  54. fontSize:20}}
  55. onPress={() =>{
  56. this.setState({
  57. size:this.state.size+10
  58. })
  59. }}
  60. >吹</Text>
  61. <Text
  62. style={
  63. {
  64. fontSize:20}}
  65. onPress={() =>{
  66. this.setState({
  67. size:this.state.size-10
  68. })
  69. }}
  70. >fang</Text>
  71. <Image style={
  72. { width:this.state.size,height:this.state.size}}
  73. source={require('./timg.jpg')} />
  74. </View>)

http://www.devio.org博客

发表评论

表情:
评论列表 (有 0 条评论,270人围观)

还没有评论,来说两句吧...

相关阅读

    相关 vue中prop

    prop的大小写 HTML 中的 `attribute` 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelC