React Native 小实例采用View布局如下视图

最新推荐文章于 2021-12-15 20:32:51 发布

你可以叫我men

最新推荐文章于 2021-12-15 20:32:51 发布

阅读量2.7k

点赞数

分类专栏： RN 文章标签： RN

本文链接：https://blog.csdn.net/zhaoweizheng66/article/details/52769122

版权

RN 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

React Native 小实例采用View布局如下视图

实例步骤

1.加载View组件

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import中添加View组件

2.创建组件

class FirstRN extends Component { //继承方式
  render() { //渲染
    return (
      <View style={styles.container}>
      </View>
    );
  }
}

3.添加样式表

const styles = StyleSheet.create({
  container: {
    flex: 1,
    borderWidth:1,
    borderColor:'red',
    flexDirection:'row',
    //backgroundColor: '#0f0',
  },
  item: {
    flex: 1,
    height:80,
    borderWidth:1,
    borderColor:'blue',
  },
});

4.注册入口

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

5.外层布局

<View style={styles.container}>
</View>

6. flex box水平三栏布局

外联样式: style={styles.container}
内联样式: style={{flex:1,borderWidth:1}}
多个样式: style={[styles.container,{flex:1,borderWidth:1}]}

7.完善效果及整体代码

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

class FirstRN extends Component {
  render() {
    return (
      <View style={styles.flex}>
       <View style={styles.container}>
          <View style={[styles.item,styles.center]}>
            <Text style={styles.font}>酒店</Text>
          </View>
          <View style={[styles.item, styles.lineLeftRight]}>
            <View style={[styles.flex, styles.center, styles.lineCenter]}>
              <Text style={styles.font}>海外酒店</Text>
            </View>
            <View style={[styles.flex, styles.center]}>
              <Text style={styles.font}>特惠酒店</Text>
            </View>
          </View>
          <View style={[styles.item, styles.lineLeftRight]}>
             <View style={[styles.flex, styles.center,styles.lineCenter]}>
              <Text style={styles.font}>团购</Text>
            </View> 
            <View style={[styles.flex, styles.center]}>
              <Text style={styles.font}>客栈,公寓</Text>
            </View>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 200,
    marginLeft: 5,
    marginRight: 5,
    height: 85,
    flexDirection: 'row',
    borderRadius: 5,
    padding: 2,
    backgroundColor: '#FF0067',
  },
  item: {
    flex: 1,
    height: 80,
  },
  center: {
    justifyContent: 'center',
    alignItems: 'center'
  },
  flex: {
    flex: 1,
  },
  font: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
  lineLeftRight: {
    borderLeftWidth: 1/PixelRatio.get(),
    borderRightWidth: 1/PixelRatio.get(),//自带函数
    borderColor: '#fff',
  },
  lineCenter: {
    borderBottomWidth: 1/PixelRatio.get(),
    borderColor: '#fff',
  },
});

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