如何写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',
  },
});