二.React Native语法:Props和State

一.Props属性:

组件创建的时候需要用不同的参数进行定制,这些定制的参数就是props(属性),可为组件内部属性,也可为外部属性。

1.Props(属性):继承系统组件的属性(内部属性)
直接上代码学习与讲解
如下代码所示:

import React, {Component} from 'react';
import {AppRegistry,Image} from 'react-native';

class Bananas extends Component {
  render(){
    let  pic ={uri:'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };

    return (
        // 这里的source和style就是Image组件的属性
       <Image source={pic} style ={{width:193,height:110}} />
    );
  }
}

// 注意:这里的MyDemo一定是我们的项目名称,切记!
AppRegistry.registerComponent('MyDemo', () =>Bananas);
Props属性学习之图片展示.png

2.Props(属性):自定义组件的属性学习(外部调用属性)
如下代码所示:

import React, {Component} from  'react';
// Text 和View的基本控件
// View组件常用来作为其他组件的容器,来帮助控制布局和样式。
import {AppRegistry,Text,View} from 'react-native';

// 自定义控件(接收外部传入属性,显示属性内容)
class Greeting extends Component{
  render(){
    return (
        // this.props.name 相当于调用了Greeting自定义控件的name属性进行展示。JSX语法
        <Text>Hello {this.props.name}!</Text>
    );
  }
}

// 使用自定义控件展示数据
class  LotsOfGreetings extends Component {
  render(){
    return(
        <View style={{alignItems:'center'}}>
          <Greeting name='zhangsan'/>
          <Greeting name='lisi'/>
          <Greeting name='wangwu'/>
        </View>
    );
  }
}

AppRegistry.registerComponent('MyDemo',() =>LotsOfGreetings);

Props属性学习之View的组件展示.png

二.State 状态:

指的是组件在其生命周期中需要用状态来标记不同的数据改变结果,这种状态就是State;
其一般用于内部更改数据所用。

需要在组件类中用constructor()方法:初始化方法来初始化组件开始的状态。

如何制作一段不停闪烁的文字?
分析props和state的使用问题:文字内容在初始化render方法中一开始就创建好了,不需要后期更改,可以用props来解决;而文字的显示和隐藏是不同的2种状态,所以需要用state来解决!
分析完毕,看具体的代码和效果如下:
如下代码所示:

import React, {Component} from 'react';
import {AppRegistry,Text,View} from 'react-native';

class Blink extends Component {
  // 初始化方法
  constructor(props){
    super(props);
    // 初始化状态值内容,根据状态的值来决定文字是否显示
    this.state ={showText:true};

    // 以下2种定时器方法都可以!
    // setInterval(() => {
    //     this.setState(previousState => {
    //         return { showText: !previousState.showText };
    //     });
    // }, 1000);


    setInterval((() => {this.setState({showText:!this.state.showText});}),1000);
  }

  render(){
    let display =this.state.showText?this.props.name:' ';
    return(
        <Text>{display}</Text>
    );
  }
}

// 定义一个根组件
class Hello extends Component {
  render(){
    return(
        <View style ={{alignItems:'center'}}>
          <Blink name ='Hello Word!'/>
          <Blink name ='Hello Boss!'/>
          <Blink name ='Hello Student!'/>
        </View>
    );
  }
}

AppRegistry.registerComponent('MyDemo',() => Hello);

其运行后的效果如下:

State 状态之制作一段不停闪烁的文字.gif

温馨提示:注意以上所有代码中的注册方法:

AppRegistry.registerComponent('MyDemo',() => Hello);

其中的MyDemo,一定要替换为您自己创建项目中的工程的名字!

三.学习React Native遇到的坑

1.关于编码的习惯解释:

1.1. Ctrl +C,Ctrl +V的习惯对于React Native 的头文件引入不合适!
如下代码为React Native引入头文件方式:

import React, {Component} from 'react';
import {AppRegistry,Text,View} from 'react-native';

注意:其中的Text和View,分别表示其下面的控件的引入。
实际开发过程中,如原项目引入的是Text,而实际项目中需要引入Image等,结果直接导入,就会造成新项目找不到Image的引入路径,就会报错,而且也不是特别明显!

1.2. 类似的如下:
关于写代码时什么时候为AppRegistry,什么时候为AppRegister的问题,也是不小心造成的,如下正确注册方式:

AppRegistry.registerComponent('MyDemo', () =>Bananas);
同时请注意这里的注册的2个参数的表示!

MyDemo :一定是我们的项目名称,切记!
不然会报错如下:


报错:Application 您的项目名 has not been registered.png

Bananas:指的是注册的基本组件!

2.关于iOS平台下iOS9之后的http网络请求的安全Key的问题:

关于这里的安全Key的位置处于info.plist文件中,其类型分为以下3种情况

2.1 React Native 初始的(Xcode初始的)安全key为:

空的,哈哈!

2.2 Xcode开发中要求的文件的安全Key为:

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>

2.3 React Native 更改后可用的(Xcode初始的)安全key为:

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSExceptionDomains</key>
            <dict>
                <key>api.xxx.com</key>
                <dict>
                    <key>NSExceptionAllowsInsecureHTTPLoads</key>
                    <true/>
                </dict>
        </dict>
    </dict>

可以看出,以上三者的安全key是不一样的,而自己误认为Xcode可以开发的是与React Native的安全Key是一致的,导致了问题的拖延!最后通过网络资料解决了这个问题!
总之:React Native 开发中采用的安全Key为第2.3种的情况!

以上为自己学习和开发React Native过程中遇到的�坑,一个一个的解决了哦,愉快开启开发模式吧!

好的,后面会把React Native 的有关开发中的布局,样式以及热更新等常见策略全部分享出来哦,欢迎新手和大神吐槽,哈哈!

推荐阅读更多精彩内容