React Native 基本控件的使用

最新推荐文章于 2024-06-26 09:38:09 发布

小溪彼岸

最新推荐文章于 2024-06-26 09:38:09 发布

阅读量716

点赞数

分类专栏： React Native笔记文章标签： native 控件

本文链接：https://blog.csdn.net/zww1984774346/article/details/54585302

版权

React Native笔记专栏收录该内容

25 篇文章 1 订阅

订阅专栏

1、View

最简单的给组件设定尺寸的方式就是在样式中指定固定的width和height。React Native中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。

写法一：

 <View>
       <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
       <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
       <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
 </View>

写法二：

<View>
   <View style={styles.wid5} />
   <View style={styles.wid10} />
   <View style={styles.wid15} />
</View>

const styles = StyleSheet.create({
     wid5:{
        width: 50, height: 50, backgroundColor: 'powderblue'
     },
     wid10:{
      width: 100, height: 100, backgroundColor: 'skyblue'
     },
     wid15:{
      width: 150, height: 150, backgroundColor: 'steelblue'
     }
});

效果图如下：
这里写图片描述

<View style={{flex: 1}}>
    <View style={{flex: 1, backgroundColor: 'powderblue'}} />
    <View style={{flex: 2, backgroundColor: 'skyblue'}} />
    <View style={{flex: 3, backgroundColor: 'steelblue'}} />
</View>

效果图：
这里写图片描述

flexDirection：

//`flexDirection`：`column`看看
      <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>

效果图：
这里写图片描述

这里写图片描述

justifyContent：

      // 尝试把`justifyContent`改为`center`看看
      // 尝试把`flexDirection`改为`row`看看
      <View style={{
        flex: 1,
        flexDirection: 'row',
        // justifyContent: 'space-between',
        justifyContent: 'center',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>

这里写图片描述

alignItems:

      // 尝试把`alignItems`改为`flex-start`看看
      // 尝试把`justifyContent`改为`flex-end`看看
      // 尝试把`flexDirection`改为`row`看看
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>

这里写图片描述

2、Button

accessibilityLabel string
用于给残障人士显示的文本（比如读屏器软件可能会读取这一内容）
color color
文本的颜色(iOS)，或是按钮的背景色(Android)
disabled bool
设置为true时此按钮将不可点击
onPress function
用户点击此按钮时所调用的处理函数
title string
按钮内显示的文本

<Button
      onPress={onButtonPress}
      title="Learn More"
      color="#841584"
      accessibilityLabel="Learn more about this purple button"
      />