React Native_初识ReactNative

RN中的View

作为创建UI时最基础的组件，View是一个支持Flexbox布局、样式、一些触摸处理、和一些无障碍功能的容器，并且它可以放到其它的视图里，也可以有任意多个任意类型的子视图。不论在什么平台上，View都会直接对应一个平台的原生视图，无论它是UIView、<div>还是android.view.View

注意：App.js文件中的View组件相当于web中的body

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
       <Text>我在这里</Text>
      </View>
    );
  }
}

最外层中的View则是Web开发中正常的View

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
          <Text>我在这里</Text>
          <View style={styles.innerViewStyle}>
              <Text>我是里面的View</Text>
          </View>
          <View style={styles.nextViewStyle}>
              <Text>我是最下面的View</Text>
          </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    // flex: 1,
      height:300,
      width:100,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red',
  },
  innerViewStyle:{
      backgroundColor:'yellow',
  },
    nextViewStyle:{
        backgroundColor:'green'
    }
});

FlexBox布局

ps：如果有微信小程序开发经验的，几乎是无缝接轨到RN，几乎都是一样的布局

column 从上到下
column-reverse 从下往上
row 从左往右
row-reverse 从右往左

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop:40,
        flexDirection:'column',
        backgroundColor: '#F5FCFF',
    }
});

Flex布局练习

export default  class  Test1 extends  Component{
  render(){
      return (
          <View style={styles.container}>
              <Text style={{backgroundColor:'red',}}>No.one</Text>
              <Text style={{backgroundColor:'green',height:40}}>No.2</Text>
              <Text style={{backgroundColor:'blue',height:50}}>No.3</Text>
              <Text style={{backgroundColor:'yellow',height:60}}>No.4</Text>
          </View>
      );
  }
}

const styles = StyleSheet.create({
    container: {
        // flex: 1,
        marginTop:40,
        flexDirection:'column',
        backgroundColor: 'gray',
        //改变主轴的方向
        flexDirection:'row',
        //设置主轴的对齐方式
        //flex-start 对齐主轴的起点位置
        //flex-end   对齐主轴的终点位置
        //space-between 两端对齐
        //space-around  平均分配
        //center 居中
        justifyContent:'space-around',
        //设置侧轴
        //默认值：stretch  如果没有设置高度，或者高度为auto，子控件就占满父控件
        alignItems:'stretch',
    }
});

练习2

export  default class Test2 extends Component{
    render(){
        return(
            <View style={styles.container}>
                <Text style={{backgroundColor:'red',}}>No.one</Text>
                <Text style={{backgroundColor:'green',width:80}}>No.2</Text>
                <Text style={{backgroundColor:'blue',width:90}}>No.3</Text>
                <Text style={{backgroundColor:'yellow',width:100}}>No.4</Text>
                <Text style={{backgroundColor:'black',width:110}}>No.5</Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({
container: {
        backgroundColor:'purple',
        //上边距
        marginTop:25,
        //主轴方向
        flexDirection:'row',
        //主轴对齐方式
        justifyContent:'flex-start',
        //侧轴对齐方式
        alignItems:'center',
        //主轴显示不下，换一行
        //默认值：nowrap
        flexWrap:'wrap',

    }
});

练习3

export default class Test3 extends Component{
    render(){
        return(
          <View style={styles.container}>
              {/*红色控件占用父组件主轴方向的比例：5/10 */}
              <Text style={{backgroundColor:'red', flex:5,height:60, alignSelf:'flex-start'}}>No.one</Text>
              {/*
              alignSelf:这个属性可以覆盖alignItems
              默认为auto 表示继承父标签的属性
              'auto','flex-start','flex-end','center','stretch'
              */}
              <Text style={{backgroundColor:'green', flex:2,height:70}}>No.2</Text>
              <Text style={{backgroundColor:'blue', flex:2,height:80}}>No.3</Text>
              <Text style={{backgroundColor:'yellow', flex:1,height:90}}>No.4</Text>
          </View>
        );
    }
}
const styles = StyleSheet.create({
   container: {
        backgroundColor:'purple',
        //上边距
        marginTop:25,
        //主轴方向
        flexDirection:'row',
        //主轴对齐方式
        justifyContent:'flex-start',
        //侧轴对齐方式
        alignItems:'center',
   }
});

获取屏幕宽高及屏幕分辨率

var Dimensions= require('Dimensions');
export default class Test4 extends Component{
    render(){
        return(
          <View style={styles.container}>
             <Text>当前屏幕宽度:{Dimensions.get('window').width}</Text>
             <Text>当前屏幕宽度:{Dimensions.get('window').height}</Text>
             <Text>当前屏幕分辨率:{Dimensions.get('window').scale}</Text>
          </View>
        );
    }
}
const styles = StyleSheet.create({
   container: {
       flex:1,
       justifyContent:'center',
       alignItems:'center'
   }
});