如何写RN样式如何写RN组件如何满屏如何使用变量

2022-05-11 114

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 如何写RN样式如何写RN组件如何满屏如何使用变量

app.js

文本水平居中了哈

控制文本的大小字体颜色等只有在文本元素上去控制哈

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
const App: () => React$Node = () => {
  return (
    <View style={styles.box}>
      <Text style={styles.boxfont}>12好3</Text>
    </View>
  );
};
export default App;
const styles = StyleSheet.create({
  box: {
    width: 750,
    height: 100,
    lineHeight: 100,
    backgroundColor: 'pink',
    display: 'flex',
    justifyContent: 'center',
  },
  // 控制文本的大小 字体颜色等 只有在文本元素上去控制哈
  boxfont: {
    color: 'blue',
    fontSize: 20,
  },
});

在app.js中写入一个组件哈

app.js如下

import React from 'react';
import ViewDemo from './ViewDemo1';
const App: () => React$Node = () => {
  return <ViewDemo></ViewDemo>;
};
export default App;

组件ViewDemo1.js

import React, {Component} from 'react';
import {View, Text, StyleSheet} from 'react-native';
export default class viewDemo1 extends Component {
  render() {
    return (
      <View style={styles.box}>
        <Text>左边</Text>
        <Text>中间</Text>
        <Text>右边</Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  box: {
    display: 'flex',
  },
});

水平垂直居中

export default class demo2 extends Component {
  render() {
    return (
      <View style={styles.box}>
        <Text>左边</Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  box: {
    width: '100%', //撑满屏幕
    height: 45, //高度不加引号 直接写数字
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'pink',
  },
});

全屏 tu

全屏利用了

width: '100%', //撑满屏幕

height: '100%', //撑满屏幕

export default class demo2 extends Component {
  render() {
    return (
      <View style={styles.box}>
        <Text>左边</Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  box: {
    width: '100%', //撑满屏幕
    height: '100%', //高度不加引号 直接写数字
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'pink',
  },
});

const myDimensions = Dimensions.get('window');

可以计算满屏哈

动态计算

所以现在有两种方第一种是 100% 第二种是Dimensions 【dɪ ˈmɛn ʃən z]】

import React, {Component} from 'react';
import {View, Text, StyleSheet, Dimensions} from 'react-native'; //引入Dimensions
const myDimensions = Dimensions.get('window'); //
const mywd = myDimensions.width; //动态计算
const myht = myDimensions.height;
export default class demo2 extends Component {
  render() {
    return (
      <View style={styles.box}>
        <Text>左边</Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  box: {
    width: mywd, //直接使用变量
    height: myht, //
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'pink',
  },
});