React Native学习之路(2)-基本语法

（1）基本的语法结构

// 第一部分：引入组件
import React, { Component } from 'react',
import {
   AppRegistry,
   StyleSheet,
   View,
   Text
} from 'react-native'；

// 第二部部分：通过class xxxx extends Component { render() { return () } };（构造器）
// 通过新建组件来做类似于html结构的内容，只能有一个<View>,所有的内容都必须放在<view>中
export default class b extends Component {
   render() {
          return (
             <View style={ styles.aa}>
                   <Text style={styles.bb}>文字文字</Text>
             </View>
          ); 
     }
}

//第三部分：样式，相当于css
const styles = StyleSheet.create({
       aa: { backgrounColor: red }
       bb: { }
});

//第四部分：
AppRegistry.registerComponent( 'b', () => b );

(2)组件的生命周期

(1)组件的初始化，渲染，装载完成。
(2)组件运行时的状态（往往是用户第一眼看到的状态）
(3)组件卸载

RN组件的生命周期

• 生命周期小应用：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
export default class bb extends Component {
  constructor(props) {
      super(props)
      this.state = { time: 0 }
  }
  timesPlus() {
    let times = this.state.time;
    times++;
    this.setState({ time: times });
  }
  componentWillMount() {
    console.log("组件即将安装-componentWillMount");
  }
  componentDidMount() {
    console.log("组件安装后-componentDidMount");
  }
//在componentWillMount和componentDidMount之间会执行render的console.log
  shouldComponentUpdate() {
    console.log("shouldComponentUpdate");
    return true;
  }
  componentWillUpdate() {
    console.log("componentWillUpdate");  
  }
//在componentWillUpdate和componentDidUpdate之间会执行render的console.log
// 这里需要点击才会实现  
  componentDidUpdate() {
    console.log("componentDidUpdate");
  }
  render() {
    console.log("render");
    return (
      <View style={styles.container}>
        <Text style={styles.welcome} onPress={this.timesPlus.bind(this)}>
          你点击我试试
        </Text>
        <Text style={styles.instructions}>
          你点我 { this.state.time } 多少次了
        </Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
})
AppRegistry.registerComponent('bb', () => bb);

效果图：

点击实现数字+1
测试结果

(3) Props(属性)

• 我们可以把任意合法的JavaScript表达式通过括号嵌入到JSX语句中。
• View组件 常用作其他组件的容器，来帮助控制布局和样式。
• 在组件中通过 this.props.(属性名) 来得到属性值；

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>   //通过this.props.(属性名) 来得到name属性
    );
  }
}
class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />      //调用Greeting组件
        <Greeting name='Jaina' />       //调用Greeting组件
        <Greeting name='Valeera' />    //调用Greeting组件
      </View>
    );
  }
}
AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);

(4) State(状态)

• 你需要在 constructor 中初始化 state ，然后在需要修改时调用 setState 方法。

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class Blink extends Component {
 
 constructor(props) {    //在constructor中初始化state
    super(props);  )      //这一句不能省略，照抄即可
    this.state = { showText: true };
    // 每1000毫秒对showText状态做一次取反操作
    setInterval(() => {
      this.setState(previousState => {
        return { showText: !previousState.showText };
      });
    }, 1000);
  }

  render() {
    // 根据当前showText的值决定是否显示text内容
    let display = this.state.showText ? this.props.text : ' ';
    return (
      <Text>{display}</Text>
    );
  }
}
class BlinkApp extends Component {
  render() {
    return (
      <View>
        <Blink text='I love to blink' />
        <Blink text='Yes blinking is so great' />
        <Blink text='Why did they ever take this out of HTML' />
        <Blink text='Look at me look at me look at me' />
      </View>
    );
  }
}
AppRegistry.registerComponent('BlinkApp', () => BlinkApp);