一起学ReactNative(2) Flex布局入坑手册

前言

网上面 关于Flex布局的文章 很多 有些也非常的详细
但是我觉得 学东西 还是得从实践触发 而不是光讲理论对不
今天来跟大家分享一下 自己在学习Flex布局中遇到的各种坑
如文章中有任何的错误 都可以直接联系我本人
或者在github上面提交问题
QQ:469373256

源码地址

https://github.com/fangkyi02/Demo

案例1(文本居中)

错误

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

export default class TextAlign extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={{justifyContent:'center',alignItems:'center'}}>asdasd</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

正确

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

export default class TextAlign extends Component {
  render() {
    return (
      <View style={[styles.container,{justifyContent:'center',alignItems:'center'}]}>
        <Text >asdasd</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

我想刚接触的人 一定有很多人这样尝试过吧 认为 我想实现一个Text那我就应该在Text这个style里面去做修改 但是实际结果却并非如此

其实Flex布局 你可以这样理解
对于改变控件布局形态的 都得写在父控件里面 比如居中 限宽 限高
对于改变自身子组件的样子 比如背景色 前景色 宽度 高度 等等的 都应该在子控件自身去完成

这样简单的分类一下 有没有清楚点呢？

看了上面的Text以后 你会发现 我并没有给我的Text限制宽高 但是的确是居中了 那么我们能否给View也尝试这样实现呢？来看一下接下来的案例

案例2(视图居中)

错误

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

export default class ViewAlign extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={{backgroundColor:'red'}}></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent:'center',
    alignItems:'center'
  },
});

这个代码 是为了实现一个红色的View居中的效果 先看看 觉得代码有没有什么问题呢 静思三秒 然后继续往下看

正确

import React, { Component } from ‘react’;
import {
View,
Text,
StyleSheet,
} from ‘react-native’;

export default class ViewAlign extends Component {
render() {
return (



);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent:’center’,
alignItems:’center’
},
});

不知道大家 有没有看出区别
为什么第一个不行 第二个加了一个宽高以后就可以了呢 我刚才的Text那边 不也没有写宽高的嘛 为啥就可以显示出来呢

这边跟大家说一下 一个View 你在不给定宽高跟flex的情况下 他是没有大小的一个空视图 所以你在这个时候 虽然给他指定了一个红色的背景 但是他也无法显示出来 哪怕你给他外面指定了一个居中
但是这里就会问了 为什么我刚才的Text没有指定宽高 依旧能显示出来呢
那是因为你的text的内容 就是宽高 你有了文本 有了内容 根据fontSize的这个值 你不就有了宽高了嘛

预标题

好 到目前为止 我们已经了解了 文本视图跟视图布局如何进行居中 也从中对于Flex有了一点了解 那么 我们就相对加深一下学习
还是实现居中的效果 不过 我们这次是要在tab里面去实现这个效果

再看源码之前 先自己脑补一下 应该如何实现 当然 如果你有更好的方式 也可以告诉我

案例3(Tab控件)

首先 我们假设 我们有5个TabItem
所以 我们在这边进行一下数据初始化
我这里随便输几个文字用来做Tab的标题

  constructor(props){
    super(props);
    this.data = [
      {text:'首页'},
      {text:'附近'},
      {text:'好友'},
      {text:'我的'},
      {text:'内容'},
    ]
  }

好 现在我们已经有了一个标题的数组了 接下来 我们就需要先创建一个tab的控件层
首先 我们要限制一下这个tab容器的高度 因为 你如果接下来要进行居中的话 你总不想看到你的这个tab是铺满整个屏幕的吧

   render() {
    return (
      <View style={styles.container}>
        {/* tab容器自身 */}
        <View style={styles.tabView}>
          {/* tab内容部分 */}
          <View style={styles.tabMainView}>
            {/* tabItem主体 */}
            {this._initRender()}
          </View>
          {/* tab滑动视图 用来处理tab按下以后的滑动 */}
          <View style={styles.slide}/>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  tabView:{
    height:50,
  },
  tabMainView:{
    height:50-3,
    flexDirection:'row',
  },
  slide:{
    height:5,
    width:width/5,
    backgroundColor:'red'
  }
});

好 现在 一个tab容器已经呈现出来了 接下来 就是要为每个tab加上内容

  _initRender = () =>{
    return this.data.map((el,i)=>{
      return (
        // 单个的item控件
        <View style={styles.itemView}>
          {/* item主体内容 */}
            <View>
              <Text>{el.text}</Text>
            </View>
        </View>
      );
    })
  }

这里做一下解释
el 数组内容
i 数组内容位置
首先map从数组中 依次的枚举出 我在数组中填写的初始化标题数据
然后这个el的数据传递给了text文本 并且通过外部包裹的view变成一个组件视图
但是这里要注意 这里的map中return的数据 并没有立即返回 他是等整个数组循环完成以后 在做了返回

一个简单的tab就这样实现了 当然 这个只是最简单的tab
如果你想实现一些效果的话 可以这样实现 也非常简单

  _itemDown = (i) =>{
    this.setState({
      id:i
    });
  }
  _initRender = () =>{
    return this.data.map((el,i)=>{
      return (
        // 单个的item控件
        <View style={styles.itemView}>
          {/* item主体内容 */}
            <View>
              <TouchableOpacity onPress={this._itemDown.bind(this,i)}>
                <Text style={this.state.id==i?styles.itemTextFocus:styles.itemTextNoFocus}>{el.text}</Text>
              </TouchableOpacity>

            </View>
        </View>
      );
    })
  }

这里也很简单 根据this.state.id的值然后判断需要采取哪个styles
然后当你按下的时候 触发onPress的时候 然后设置你的state.id为i值
这个时候因为setState的关系 会导致整个页面刷新 然后又回到了刚才的判断this.state.id那边 来进行刷新渲染

记得 如果要使用这个方法来实现的话 最好将tab封装成一个子组件 不然像我这样直接进行setState会导致 下面的视图组件也进行重新的渲染

好了 来看一下结果吧

我的所有源码都已经上传到了github 你们有兴趣的话 可以自己去做修改 比如实现下面的滑块条效果
https://github.com/fangkyi02/Demo
如项目中有什么错误的地方 还望大家指正
QQ：469373256