React Native 基础组件学习

祝你幸福365

已于 2023-04-10 00:54:20 修改

阅读量293

点赞数

分类专栏： ReactNative开发文章标签： react native 学习 react.js

于 2022-10-20 17:10:54 首次发布

本文链接：https://blog.youkuaiyun.com/happiness365/article/details/127428676

版权

ReactNative开发专栏收录该内容

6 篇文章

订阅专栏

1. View

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

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View><Text>Apple</Text></View>
        <View><Text>Banana</Text></View>
        <View><Text>Pear</Text></View>
      </View>
    );
  }
}

let styles = StyleSheet.create({
  container: {
    backgroundColor: '#eae7ff',
    paddingTop: 48,
  },
});


export default App;

View 组件默认是包裹内容的，横向沾满屏幕宽度。如果设置 flex:1，则会竖向沾满屏幕高度。

View属性表
flex	flex 布局： 1 表示占满剩余总宽度，0.2 占满剩余总宽度的20%
flexDirection	column 竖向排列 children row 横向排列 children
justifyContent	center 居中 flex-end 尾部 flex-start 头部 space-between 平分 space-around 头尾有空间的平分
alignItems	center 水平居中 flex-start 水平居左 flex-end 水平居右
backgroundColor	背景色
width	宽度，可以使百分比，也可是具体数值，百分比用 "20%" 来表示

2. Text 组件

Text 组件默认也是占满屏幕宽度的。

View属性表
width
width	宽度百分比：20%，具体的数值：20，
height	高度其他同宽度一样

黄色块屏幕垂直居中，且平分屏幕宽度，文字内容居中。

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

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.item}><Text style={styles.itemText}>Apple</Text></View>
        <View style={styles.item}><Text style={styles.itemText}>Banana</Text></View>
        <View style={styles.item}><Text style={styles.itemText}>Pear</Text></View>
      </View>
    );
  }
}

let styles = StyleSheet.create({
  container: {
    backgroundColor: '#eae7ff',
    paddingTop: 0,
    marginTop: 0,
    flexDirection:'row',
    flex:1,
    justifyContent: 'space-between',
    alignItems:'center'
  },
  item: {
    backgroundColor: '#FFFF00',
    height: 60,
    flexDirection:'column',
    justifyContent:'center',
  },
  itemText:{
    color: '#0000ff',
    backgroundColor:'#FFFFFF',
    alignSelf:'center'
  },
});


export default App;

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

class App extends React.Component {

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.title}>我是标题</Text>
                <Text style={[styles.itemText, {fontStyle: 'italic'}]}>
                    <Text style={{fontWeight: '300'}}>你好，</Text>
                    hello world!</Text>
            </View>
        );
    }
}


let styles = StyleSheet.create({
        container: {
            justifyContent: 'flex-start',
            //alignItems: 'center',
            flexDirection: 'column',
            backgroundColor: '#eae7ff',
            flex: 1,
            paddingTop: 48,
        },
        title: {
            fontSize: 16,
            color: '#6435c9',
            textAlign: 'center',
            fontStyle: 'italic',
            letterSpacing: 2,
            lineHeight: 33,
            fontFamily: 'Helvetica Neue',
            fontWeight: '500',
            textDecorationLine: 'underline',
            textDecorationStyle: 'dashed',
        },
        item: {
            backgroundColor: '#fff',
            borderWidth: 1,
            borderColor: '#6435c9',
            margin: 6,
            flex: 1,
            height: 60,
        },
        itemText: {
            fontSize: 16,
            fontFamily: 'Helvetica Neue',
            fontWeight: '100',
            color: '#6435c9',
            padding: 10,
        },

    },
);

export default App;

3. Image 组件

import React from 'react';
import {
  StyleSheet,
  View,
  Image
} from 'react-native';


class App extends React.Component {

  render() {
    return (
        <View style={styles.container}>
          {/* Image 组件在0.60.0版本中不能作为背景图片使用，需要改成 ImageBackground 组件 */}
          <View style={styles.topContainer}>
            <Image
                style={styles.image}
                source={require('./images/robot.jpg')}
            />
            <Image
                style={styles.image}
                source={require('./images/robot.jpg')}
            />
            <Image style={styles.image} source={{uri: "https://sample-videos.com/img/Sample-jpg-image-50kb.jpg"}}/>
          </View>
        </View>
    );
  }
}

let styles = StyleSheet.create({
      image:{
        width: 100,
        height: 100
      },
      container: {
        flexDirection: 'column',
        backgroundColor: '#eae7ff',
        flex: 1,
        paddingTop: 0,
      },
      topContainer: {
        flexDirection: 'row',
        justifyContent: 'space-around',
        backgroundColor: '#00ff00',
      }
    },
);

export default App;

4. ImageBackground 组件

import React from 'react';
import {
  StyleSheet,
  View,
  Text,
  ImageBackground,
} from 'react-native';


class App extends React.Component {

  render() {
    return (
        <View style={styles.container}>
          {/* Image 组件在0.60.0版本中不能作为背景图片使用，需要改成 ImageBackground 组件 */}
          <ImageBackground
              style={styles.backgroundImage}
              source={{uri:'https://img1.doubanio.com/view/photo/l/public/p2498830199.webp'}}
          >
            <View style={styles.overlay}>
              <Text style={styles.overlayHeader}>机器人总动员</Text>
              <Text style={styles.overlaySubHeader}>Wall.E (2008)</Text>
            </View>
          </ImageBackground>
        </View>
    );
  }
}

//用对象的形式来写样式
let styles = StyleSheet.create({
      image:{
        width: 100,
        height: 100
      },
      backgroundImage: {
        flex:1,
        /**
         * resiseMode:
         * 'contain'
         * 'cover',
         * 'stretch'
         * */
        resizeMode: 'cover'
      },
      overlay:{
        backgroundColor: 'rgba(0,0,0,0.3)',
        alignItems: 'center',
      },
      overlayHeader:{
        fontSize: 33,
        fontFamily:'Helvetica Neue',
        fontWeight: '200',
        color: '#eae7ff',
        padding: 10,
      },
      overlaySubHeader:{
        fontSize: 16,
        fontFamily:'Helvetica Neue',
        fontWeight: '200',
        color: '#eae7ff',
        padding: 10,
        paddingTop: 0,
      },
      container: {
        flexDirection: 'column',
        backgroundColor: '#eae7ff',
        flex: 1,
        paddingTop: 0,
      },
    },
);

export default App;

参考：