react native布局
发布在react native2015年12月8日view:11001
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

简单的入门基础我就忽略了,本教程是使用xcode运行代码。用到react-native-css这个nodejs模块,可以减少一些在JSX中写样式的蛋痛感!

react native是提倡我们使用flexbox进行布局,虽然有点不一样,但由于其什么浮动,并且position也与PC出入太多了,因此布局还是乖乖用flexbox吧。

react native中有两个基本元素,<View>与<Text>相当于PC的div与span,一个用于布局,一个用于修饰!此外,它还有许多样式是不支持的,比如说不支持vertical-align,因此我们无法实现文本垂直居中(虽然也有招数,不过要计算),需要在外面套一个View。

parent {
  flex:1;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background-color: #ddc;
}

aaa{
  width:100;
  height:100;
  color:green;
  text-align: center;
  font-size: 20;
  background-color: #a9ea00;
  line-height: 60;
}
bbb{
  width:100;
  height:100;
  color:#fff;
  text-align: center;
  background-color: black;
  line-height: 100;
}

ccc{
  width:100;
  height:100;
  color:blue;
  text-align: center;
  background-color: pink;
}

我们使用react-native-css 将它转换为JS文件 enter image description here enter image description here 然后在主程序引入它

'use strict';

var React = require('react-native');
var styles = require('./style')
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} = React;

var AwesomeProject = React.createClass({
  render: function() {
    return (
      <View style={styles.parent}>

        <Text style={styles.aaa}>
        11111
        </Text>

        <Text style={styles.bbb} >
        222
        </Text>

        <Text style={styles.ccc} >
        333
        </Text>

      </View>
    );
  }
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

效果如下: enter image description here

左右布局

下面是主菜,我们先来一个常见的左右布局。左边是主面板,右边是不定宽的边拦。容器要加上flex:1表明它是伸缩容器,我们是两栏布局,就需要 flex-direction: row;要占满空间,可以选用 justify-content: space-between/flex-start; 我们需要项目向上对齐,可以用 align-items: stretch/flex-start.接着右边栏,设置flex:1,它就占满剩余空间。注意,不能让主面板也使用flex:1,否则就左右两边等宽了!

parent {
  flex:1;
  flex-direction: row;
  justify-content:space-between;
  align-items: stretch;
  background-color: yellow;
}

main{
  width:280;
  height:100;
  color:green;
  text-align: center;
  background-color: #a9ea00;
}

right{
  flex:1;
  text-align: center;
  background-color: #31b0d0;
}

text{
  padding:10;
  font-size:12;
  color:#fff;
  line-height:20;
}

页面结构如下:

/**
 * 左右布局 by 司徒正美
 */
'use strict';

var React = require('react-native');
var styles = require('./style')
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} = React;

var AwesomeProject = React.createClass({
  render: function() {
    return (
      <View style={styles.parent}>
        <View style={styles.main}>
          <Text style={styles.text}>
          这是主面板{'\n'}
          这是主面板{'\n'}
          这是主面板{'\n'}
          这是主面板{'\n'}
          是固定宽的
          </Text>
        </View>
        <View style={styles.right}>
          <Text style={styles.text}>
           这是右边拦{'\n'}
           不定宽
          </Text>
        </View>
      </View>
    );
  }
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

在react native中想换行比较怪异,由于没有br元素,那么我们需要在JS逻辑中将换行符注入进去! enter image description here

看到警告没有,那是因为View是不支持color 与text-align样式的。react native与PC端的CSS是有很大差异的,不过往后,react native会不断添加对CSS的支持。

左中右布局

这个与上面的很相似,中间是定宽,左右是等宽的边栏,许多博客都是用这布局。

parent {
  flex:1;
  flex-direction: row;
  justify-content:space-between;
  align-items: stretch;
  background-color: #ddc;
}

main{
  width:280;
  height:300;
  background-color: #a9ea00;
}

left{
  flex:1;
  background-color: #31b0d0;
}
right{
  flex:1;
  background-color: #5cb55c;
}
text{
  padding:10;
  font-size:12;
  color:#fff;
  line-height:20;
}

主程序如下:

/**
 * 左中右布局 by 司徒正美
 */
'use strict';

var React = require('react-native');
var styles = require('./style')
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} = React;

var AwesomeProject = React.createClass({
  render: function() {
    return (
      <View style={styles.parent}>
        <View style={styles.left}>
          <Text style={styles.text}>
           这是左边拦{'\n'}
           不定宽
          </Text>
        </View>
        <View style={styles.main}>
          <Text style={styles.text}>
          这是主面板{'\n'}
          这是主面板{'\n'}
          这是主面板{'\n'}
          这是主面板{'\n'}
          是固定宽的
          </Text>
        </View>
        <View style={styles.right}>
          <Text style={styles.text}>
           这是右边拦{'\n'}
           不定宽
          </Text>
        </View>
      </View>
    );
  }
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

enter image description here

上中下布局

要求上面的总在上面,下面的总是贴着底。

parent {
  flex:1;
  flex-direction:column;

  background-color: #ddc;
}

main{
  flex:1;
  background-color: #EFDA5B;
}

header{
  height:40;
  background-color: #31b0d0;
}
footer{
  height:40;
  background-color: #5cb55c;
}
text{
  padding:10;
  font-size:12;
  color:#fff;
  line-height:20;
}

主程序如下:


/**
 * 上中下by 司徒正美
 */
'use strict';

var React = require('react-native');
var styles = require('./style')
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} = React;

var AwesomeProject = React.createClass({
  render: function() {
    return (
      <View style={styles.parent}>
        <View style={styles.header}>
          <Text style={styles.text}>
           登录
          </Text>
        </View>
        <View style={styles.main}>
          <Text style={[styles.text,{color:'#000'}]}>
          这是主面板{'\n'}
          这是主面板{'\n'}
          这是主面板{'\n'}
          这是主面板{'\n'}
          这是不定高的
          </Text>
        </View>
        <View style={styles.footer}>
          <Text style={styles.text}>
           注册地址
          </Text>
        </View>
      </View>
    );
  }
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

enter image description here

这种布局通常出现在新闻或公众号,但中间那部分内容会很多,这高度会放不下,但react native是不支持overflow:scroll,我们可以使用scrollView组件来处理。 我们改一下样式,添加b类名

b {
  font-weight: bold;
}

主程序改成这样


/**
 * 上中下by 司徒正美
 */
'use strict';

var React = require('react-native');
var styles = require('./style')
var {
  AppRegistry,
  StyleSheet,
  Text,
  ScrollView,
  View,
  Image
} = React;

var AwesomeProject = React.createClass({
  render: function() {
    var repeatArr = Array(100).join("1").split("")
    return (
      <View style={styles.parent}>
        <View style={styles.header}>
          <Text style={styles.text}>
           登录
          </Text>
        </View>
        <ScrollView style={styles.main}>
          {
            repeatArr.map(function(el, index){
              return <Text key={index} style={[styles.text,{color:'#000'}]}>
              <Text style={styles.b}>{index}</Text>
              这是主面板{'\n'}
              </Text>
            })
          }
        </ScrollView>
        <View style={styles.footer}>
          <Text style={styles.text}>
           注册地址
          </Text>
        </View>
      </View>
    );
  }
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

` 基本上,结果这两种布局就够用,如果你想用切换卡或表格,这有原生的组件可用!

enter image description here

评论
发表评论
4年前

好文章

4年前
赞了此文章!
4年前

这个工具好,可是我去npm install react-native-css 居然说我的react-native 版本太低,我的react-native-cli是昨天刚刚npm install react-native-cli下来的。 但我react-native --version居然是:0.1.7 (react-native-css要0.5以上。)有谁知道是什么原因吗?

4年前
赞了此文章!
4年前

马上

WRITTEN BY
司徒正美
穿梭于二次元与二进制间的魔法师( ̄(工) ̄) 凸ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้
TA的新浪微博
PUBLISHED IN
react native

用于放置react native的相关文章

我的收藏