0


移动跨平台框架ReactNative视图View【04】

在这里插入图片描述

前端江太公


React Native,是一个混合移动应用开发框架,是目前流行的跨平台移动应用开发框架之一。React Native 采用不同的方法进行混合移动应用开发。它不会生成原生 UI 组件,而是基于 React,React Native 是一个用于构建基于 Web 的交互界面的 JavaScript 库,因此会有更丰富的 UI 体验效果,同时也能够很好地调用底层框架的UI使用。

React Native系列导航
01-React Native 基础教程
02-安装ReactNative
03-ReactNative目录结构
04-ReactNative视图View
05-ReactNative组件样式style
06-ReactNative文本组件Text
07-ReactNative组件状态state
08-ReactNative组件属性props
09-ReactNative输入组件TextInput
10-ReactNative图片组件Image
11-ReactNative活动指示器组件
12-ReactNative弹出框Alert
13-ReactNative存储数据组件AsyncStorage
14-ReactNative动画组件Animated
15-ReactNative开关组件Switch
16-状态栏组件StatusBar
17-ReactNative滚动视图ScrollView
18-ReactNative选择器Picker
19-ReactNative网络请求

React Native 视图 View

手机屏幕

然后我们回来看看我们的手机屏幕,是不是也是一个 长方形

当我们要在上面显示东西的时候,我们是不是也在规划一个一个豆腐块?

比如下面这样的

React Native 视图组件 View

如果我们把左上角定为起点,每个豆腐块都有自己的 位置,有自己的

在 React Native 中,这一个一个豆腐块,我们称之为一个 视图

React Native 中的视图组件 View 。

React Native 中的视图组件 View 是一个最基本的组件,它的作用,就是用来规划一个一个豆腐块,就上上面的 绿色蓝色 长方形或长方型。

我们以后会学习到的所有其它组件,都是从这个

View

组件继承而来,或者说包含了这个组件

View

如果你会 HTML,那么

组件就是 HTML 中的

引入组件

在 React Native 中使用 View 组件首先需要引入她

import { View } from 'react-native'

使用语法

 组件可以单独使用,也可以嵌套其它组件,例如嵌套文本组件 
<View style={{styles}}>
  <View>
    <Text>This is my text</Text>
  </View>
</View>

`` 文本组件我们会在以后的章节中学习。

属性

`` 组件支持很多属性,但最常见的还是

style

属性。

style

属性用于设置视图的样式,类似于 HTML 中的

style

属性。

style

属性值必须是一个对象,例如要设置背景色,则需要使用

backgroundColor

属性。

<View style={{backgroundColor:'red'}}>
</View>

关于

style

属性的更多知识,我们会在后面的章节中学习到。

使用范例

React Native 中的视图组件 View 一般用于布局,也就是我们上面所说的划分一个一个豆腐块。

下面的代码,我们演示了下

View

组件的基本使用方式,我们只需要修改

App.js

即可。

App.js

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

const App = () => {
   return (
      <View>
         <View>
            <Text>简单教程,简单编程</Text>
         </View>
         <View style={{marginTop:8,padding:8,backgroundColor:'blue'}}>
            <Text style={{color:'white'}}>简单教程,简单编程</Text>
         </View>
         <View style={{marginTop:8,padding:8,width:200,backgroundColor:'red'}}>
            <Text style={{color:'white'}}>简单教程,简单编程</Text>
         </View>
      </View>
   )
}
export default App

演示效果如下

img

View 组件的使用场景

经过我们上面的举例,View 组件的使用场景应该很明了了。

  • 可以作为一个容器。当我们需要将元素包装在容器中时,可以使用 作为容器元素。
  • 当一个元素只支持包含一个子元素,而我们又需要它支持多个子元素的时候,我们可以把这些子元素使用 来包装。然后在把 元素作为那个元素的子元素。
  • 当相同的或不相同的两个或多个元素需要不同的展现样式的时候,我们可以把它们分别包装在不同的 中。 然后分别设置每一个 元素的样式,比如 style 属性。 素作为那个元素的子元素。
  • 当相同的或不相同的两个或多个元素需要不同的展现样式的时候,我们可以把它们分别包装在不同的 中。 然后分别设置每一个 元素的样式,比如 style 属性。
  • `` 还支持多点触摸事件。我们可以使用这个特性来达到多点触摸的功能。

本文转载自: https://blog.csdn.net/ZiChen_Jiang/article/details/123837317
版权归原作者 前端江太公 所有, 如有侵权,请联系我们删除。

“移动跨平台框架ReactNative视图View【04】”的评论:

还没有评论