02-React Native 基础

ReactNative 基础

1. Props

   • 大多数component 都可以在创建时使用不同的参数进行自定义配置，这些创建时的配置参数就叫做props。

   实例代码：

   import React, { Component } from 'react';
   import { AppRegistry, Image } from 'react-native';
   
   export default class Bananas extends Component {
     render() {
       let pic = {
         uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
       };
       return (
         <Image source={pic} style={{width: 193, height: 110}}/>
       );
     }
   }
   
   // skip this line if using Create React Native App
   AppRegistry.registerComponent('AwesomeProject', () => Bananas);
   

   预览如下：

   image.png
   • 自己创建的component 也可以使用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>
       );
     }
   }
   
   export default class LotsOfGreetings extends Component {
     render() {
       return (
         <View style={{alignItems: 'center'}}>
           <Greeting name='Rexxar' />
           <Greeting name='Jaina' />
           <Greeting name='Valeera' />
         </View>
       );
     }
   }
   
   // skip this line if using Create React Native App
   AppRegistry.registerComponent('AwesomeProject', () => LotsOfGreetings);
   

   结果如下：

   ​

   image.png

   这个例子中使用了name作为一个prop来定义Greeting component。

   注：View component要相对特殊一些，View被作为其他component的容器来使用，以控制布局样式。

2. ​State

   有两种数据类型被用来控制component：props 和 state ，props 在component的整个生命周期中是不可变的，这点上比较类似于java里的final类型，state 在component的整个生命周期中是可变的。

   import React, { Component } from 'react';
   import { AppRegistry, Text, View } from 'react-native';
   
   class Blink extends Component {
     constructor(props) {
       super(props);
       this.state = {showText: true};
   
       // Toggle the state every second
       setInterval(() => {
         this.setState(previousState => {
           return { showText: !previousState.showText };
         });
       }, 1000);
     }
   
     render() {
       let display = this.state.showText ? this.props.text : ' ';
       return (
         <Text>{display}</Text>
       );
     }
   }
   
   export default 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>
       );
     }
   }
   
   // skip this line if using Create React Native App
   AppRegistry.registerComponent('AwesomeProject', () => BlinkApp);
   

   image.png

   ​ 在实际的应用开发中，数据通常从服务端获取，或者是由用户输入。在这种场景下通常使用状态容器(例如 Redux)来控制数据流，在这种情况下我们可以使用Redux来直接修改自己的状态而不是直接调用setState 。

   ​ 当setState 被调用，App会重新渲染自己的Component，上面的实例中通过在定时器中调用setState 来实现每隔一段时间重新渲染页面。

   ​ State在react native中的运行与在react中是一样的，所以如果需要查阅更多控制状态的资料，可以参照React.Component API

3. Style

   ​ 所有的核心Component都可以配置名为style的属性。style属性名和值通常和web开发中CSS的样式属性是一致的，但是这些属性名在react native中是使用驼峰命名，例如react native中样式属性：backgroundColor 对应CSS样式中的background-color。

   ​ style属性可以是一个JavaScript对象，也可以是一个style数组，当传入一个数组时最后数组最后的style基友最高的优先级，可以利用这点来实现style的继承。

   ​ 由于component会随着开发的进行越来越复杂，为了保持代码的整洁，我们经常会使用StyleSheet.create将多个样式属性定义在一起。例子如下：

   import React, { Component } from 'react';
   import { AppRegistry, StyleSheet, Text, View } from 'react-native';
   
   export default class LotsOfStyles extends Component {
     render() {
       return (
         <View>
           <Text style={styles.red}>just red</Text>
           <Text style={styles.bigblue}>just bigblue</Text>
           <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
           <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
         </View>
       );
     }
   }
   
   const styles = StyleSheet.create({
     bigblue: {
       color: 'blue',
       fontWeight: 'bold',
       fontSize: 30,
     },
     red: {
       color: 'red',
     },
   });
   
   // skip this line if using Create React Native App
   AppRegistry.registerComponent('AwesomeProject', () => LotsOfStyles);
   

   image.png

4. Height and Width

   ​ 固定大小：

   ​ 最简单的设置组件大小的方式，要注意React Native中组件大小设置是时无单位的，会根据屏幕的宽高来判断具体的大小，比较类似于android开发中的dp。

   ​ 弹性（Flex）宽高：

   ​ flex用来指定组件在父组件中所占有的比例，如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比），比较类似于android开发中设置了android:layout_height="0dp"后android:layout_weight属性的作用。

   组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的。

5. Flexbox布局

   CSS3 Flexbox 口诀，转自：https://weibo.com/1712131295/CoRnElNkZ?ref=collection&type=comment&ssl_rnd=1511246697.5176#_rnd1511246702462

​ image.png
image.png
image.png
image.png
image.png

6. 文本输入Text Input

   见官网：http://facebook.github.io/react-native/docs/handling-text-input.html