React-Native学习第一天（了解基础组件）

React-Native

基本元素

View：视图组件

RN中的视图组件需要用标签<View></View>来表示，其类似于html中的div

Stylesheet：样式对象

用于写样式，样式需要采用驼峰命名的方法。（也可以直接Style={{color:red}}设置样式，一个{}中包括一个对象）

需要注意的是：

• 样式没有继承，需要在对应的标签上设置相关的样式
• 可以直接设置样式Style={{color:bule}}，也可以设置对象样式，并通过创建StyleSheet进行编写，例如Style={test}
• 也可以以数组的形式合并多个样式对象，例如style={[test,{color:green}]}，在这种情况下，右边的优先级会更高
• 设置flex布局（默认就是弹性布局，因此不需要设置display）

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

class App extends Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}>
        <View style={{width: 50, height: 50, backgroundColor: 'blue'}}></View>
        <View style={{width: 50, height: 50, backgroundColor: 'blue'}}></View>
        <View style={{width: 50, height: 50, backgroundColor: 'blue'}}></View>
      </View>
    );
  }
}
export default App;

Text：文本组件

文本组件 Text只能用来显示文本，如果要显示网页，可以使用网页组件 WebView。

文本组件是可以嵌套多个的，这里被嵌套的组件会继承父级的组件样式和属性，也可以自己再通过设置style再次单独设置样式