react-native部分组件、样式、事件

最新推荐文章于 2024-05-31 10:26:40 发布

温柔如你，生活如梦

最新推荐文章于 2024-05-31 10:26:40 发布

阅读量113

点赞数

分类专栏： react-native踩坑记录文章标签： javascript react.js react native 前端框架

本文链接：https://blog.csdn.net/qq_53761321/article/details/131115184

版权

react-native踩坑记录专栏收录该内容

19 篇文章 0 订阅

订阅专栏

组件、样式、事件

组件

react-native中不存在div和span等标签，他中的标签需要从react-native中引出来，并且在View组件中不能直接写字符需要用标签

import React, { Component } from "react";
import { View, Text } from 'react-native'
class App extends Component {
  render() {
    return (
      <View>
        <Text>
          Hello Word
        </Text>
      </View>
    );
  }
}

export default App;

React原生UI组件	安卓组件	IOS 组件	WEB 组件	说明
`<View>`	`<ViewGroup>`	`<UIView>`	非滚动`<div>`	一个容器，支持布局与flexbox，样式，一些触摸处理，和可访问性控制
`<Text>`	`<TextView>`	`<UITextView>`	`<p>`	显示、样式和嵌套文本字符串，甚至处理触摸事件
`<Image>`	`<ImageView>`	`<UIImageView>`	`<img>`	显示不同类型的图像
`<ScrollView>`	`<ScrollView>`	`<UIScrollView>`	`<div>`	可包含多个组件和视图的通用滚动容器
`<TextInput>`	`<EditText>`	`<UITextField>`	`<input type="text">`	允许用户输入文本

ScrollView 滚动组件作用是展示需要滚动的视图，如果页面中需要滚动区域就不需要设置样式来改变滚动，只需要使用这个组件，如果列表数量不多就可以使用这个组件，如果数量多就需要使用FlatList这个组件

import React, { Component } from "react";
import { ScrollView, Text, View } from "react-native";

class App extends Component<any, any> {
  render() {
    return (
      <View>
        <ScrollView>
          <Text style={{ fontSize: 100 }}>ScrollView</Text>
          <Text style={{ fontSize: 100 }}>ScrollView</Text>
          <Text style={{ fontSize: 100 }}>ScrollView</Text>
          <Text style={{ fontSize: 100 }}>ScrollView</Text>
          <Text style={{ fontSize: 100 }}>ScrollView</Text>
        </ScrollView>
      </View>
    );
  }
}
export default App

FlatList 高性能的简单列表组件，支持下面这些常用的功能：

完全跨平台。
支持水平布局模式。
行组件显示或隐藏时可配置回调事件。
支持单独的头部组件。
支持单独的尾部组件。
支持自定义行间分隔线。
支持下拉刷新。
支持上拉加载。
支持跳转到指定行（ScrollToIndex）。
支持多列布局。
如果需要分组/类/区（section），请使用<SectionList>.

import React, { Component } from "react";
import { FlatList, Text, View } from "react-native";

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];

class App extends Component{
  
  render() {
    return (
      <View>
        <FlatList
          data={DATA}
          renderItem={({ item }) =>  <Text>{item.title}</Text>}
          keyExtractor={item => item.id}
        />
      </View>
    );
  }
}
export default App

SectionList 高性能的分组(section)列表组件，支持下面这些常用的功能：
- 完全跨平台。
- 行组件显示或隐藏时可配置回调事件。
- 支持单独的头部组件。
- 支持单独的尾部组件。
- 支持自定义行间分隔线。
- 支持分组的头部组件。
- 支持分组的分隔线。
- 支持多种数据源结构
- 支持下拉刷新。
- 支持上拉加载。
  
  如果你的列表不需要分组(section)，那么可以使用结构更简单的<FlatList>。

StatusBar 组件使用使用这个组件可以使顶部背景颜色和手机状态栏融为一体，方便统一改变主题颜色，可以在每一个页面中嵌套使用，来定制每个页面不同的导航栏

backgroundColor：设置手机导航栏颜色

barStyle：设置手机导航栏字体颜色

translucent 设置导航栏为半透明

//  在App.tsx中使用
import Navigator from "@/navigator/index";
import React from "react";
import { Provider } from "react-redux";
import store from "@/store";
import { StatusBar } from "react-native";

const App = () => {
  return (
    <Provider store={store}>
      <Navigator/>
      <StatusBar
        backgroundColor="transparent"
        barStyle="dark-content"
        translucent
      />
    </Provider>
  );
};

export default App;

// 详情页使用

import React, { Component } from "react";
import { StatusBar, Text, View } from "react-native";

class Detail extends Component {
  render() {
    return (
     <View>
       <StatusBar barStyle="light-content" backgroundColor="#6a51ae" />
       <Text>
         详情
       </Text>
     </View>
    );
  }
}

export default Detail;

在这里插入图片描述

样式

样式的写法有两种，行内样式还有一种对象写法的样式，对象样式的写法需要使用，StyleSheet.create函数，在组件中使用如下方式，在react-native中不存在宽度单位，不需要考虑单位，因为在任何手机上展示的大小都是一样的，但是可以使用百分百，不写宽度的话默认就是100%，给View设置颜色字体是没有效果的，如下

import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";
class App extends Component {
  state = {
    a: 1
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={{ color: '#fff' }}>
          Hello Word
        </Text>
        <Text style={[this.state.a !== 1 ? {width: 50, height: 50,backgroundColor: '#ddd'} : styles.containerText]}>
          222
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'red',
    color: '#AFD'
  },
  containerText: {
    color: 'blue'
  }
})

export default App;

事件

可以使用Platform.OS === "android"判断是哪个平台
在组件中有点击事件，拖拽事件，长按等，这些事件不同于wep端的事件而是有自己的事件模型，并且使用这些事件都是一种组件如下：
1. onBlur 失去焦点事件
2. **onFocus **获取焦点事件
3. onLayout 当加载或者布局改变的事件
4. **onPress **触摸操作结束时调用，相当于点击
5. **onPressIn **只要按下并调用了Touchable元素，就会调用此方法，在onPress之前调用
6. **onPressOut **触摸释放后立即调用，在onPress方法之前调用
Button，是默认的组件其样式不可更改他只有onPress事件
```
<Button
  onPress={() => {
    Alert.alert('你点击了按钮！');
  }}
  title="点我！"
/>
```
以下所有的组件都有这些方法
TouchableHighlight
1. 本组件用于封装视图，使其可以正确响应触摸操作，当按下的时候，封装的视图的不透明度会降低，同时会有一个底层的颜色透过而被用户看到，使得视图变暗或变亮。
2. 属性
  1. underlayColor有触摸操作时显示出来的底层的颜色。
  2. activeOpacity 指定封装的视图在被触摸操作激活时以多少不透明度显示（0 到 1 之间，默认值为 0.85）。需要设置underlayColor
  3. onHideUnderlay 底层的颜色被隐藏的时候调用。函数类型
  4. onShowUnderlay 当底层的颜色被显示的时候调用。函数类型
  5. **style **可以自定义样式
  6. hasTVPreferredFocus (仅限Apple TV) TV首选焦点(请参阅视图组件的文档)。布尔值
  7. tvParallaxProperties (仅限Apple TV)对象，其属性用于控制Apple TV视差效果。 enabled:如果为true，视差效果被启用。默认为true。shiftDistanceX:默认为2.0。shiftDistanceY:默认2.0。倾斜角度:默认为0.05。放大倍数:默认为1.0。pressmagification:默认为1.0。压力:默认为0.3。pressDelay:默认为0.0。Object类型
```
import React, { useState } from "react";
import { StyleSheet, Text, TouchableHighlight, View } from "react-native";

const TouchableHighlightExample = () => {
  const [count, setCount] = useState(0);
  const onPress = () => setCount(count + 1);

  return (
    <View style={styles.container}>
      <TouchableHighlight onPress={onPress}>
        <View style={styles.button}>
          <Text>Touch Here</Text>
        </View>
      </TouchableHighlight>
      <View style={styles.countContainer}>
        <Text style={styles.countText}>
          {count ? count : null}
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingHorizontal: 10
  },
  button: {
    alignItems: "center",
    backgroundColor: "#DDDDDD",
    padding: 10
  },
  countContainer: {
    alignItems: "center",
    padding: 10
  },
  countText: {
    color: "#FF00FF"
  }
});

export default TouchableHighlightExample;
```
TouchableOpacity
1. 本组件用于封装视图，使其可以正确响应触摸操作。当按下的时候，封装的视图的不透明度会降低。此组件与 TouchableHighlight 的区别在于并没有额外的颜色变化，更适于一般场景，这个动画视图会被添加到视图层级中，少数情况下有可能会影响到布局
2. **style **可以自定义样式
3. activeOpacity 指定封装的视图在被触摸操作激活时以多少不透明度显示（0 到 1 之间）。默认值为 0.2。number类型
4. tvParallaxProperties (仅限Apple TV)对象，其属性用于控制Apple TV视差效果。 enabled:如果为true，视差效果被启用。默认为true。 shiftDistanceX:默认为2.0。 shiftDistanceY:默认2.0。 tiltAngle:默认为0.05。 magnification:默认为1.0。 pressmagification:默认为1.0。 pressDuration:默认为0.3。 pressDelay:默认为0.0
5. hasTVPreferredFocus (仅限Apple TV) TV首选焦点(请参阅视图组件的文档)。布尔值
6. nextFocusDown 电视下一个焦点向下(查看视图组件的文档)。布尔值
7. nextFocusForward TV下一个焦点向前(查看视图组件的文档)布尔值
8. nextFocusLeft TV下一个焦点向左(查看视图组件的文档) 布尔值
9. nextFocusRight TV下一个焦点右(查看视图组件的文档) 布尔值
10. nextFocusUp TV的下一个焦点(查看视图组件的文档)。布尔值
```
import React, { Component } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  onPress = () => {
    this.setState({
      count: this.state.count + 1
    });
  };

  render() {
    const { count } = this.state;
    return (
      <View style={styles.container}>
        <View style={styles.countContainer}>
          <Text>Count: {count}</Text>
        </View>
        <TouchableOpacity
          style={styles.button}
          onPress={this.onPress}
        >
          <Text>Press Here</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingHorizontal: 10
  },
  button: {
    alignItems: "center",
    backgroundColor: "#DDDDDD",
    padding: 10
  },
  countContainer: {
    alignItems: "center",
    padding: 10
  }
});

export default App;
```
TouchableNativeFeedback
1. 本组件用于封装视图，使其可以正确响应触摸操作（仅限 Android 平台）。在 Android 设备上，这个组件利用原生状态来渲染触摸的反馈。
2. background 决定在触摸反馈的时候显示什么类型的背景。它接受一个有着type属性和一些基于type属性的额外数据的对象。我们推荐选用本组件的几个静态方法来创建这个对象。
3. useForeground 设置为true可将涟漪效果添加到视图的前景，而不是背景。如果你的子视图有自己的背景，或者你正在显示图像，而你不希望波纹被它们覆盖，这是很有用的。首先检查touchablenativefeedback . canusenative前台()，因为这只在Android 6.0及以上版本上可用。如果你试着在旧版本上使用这个，你会得到一个警告和回退到后台。布尔值
4. TouchableNativeFeedback.SelectableBackground()
  
  会创建一个对象，表示安卓主题默认的对于被选中对象的背景，得到的涟漪效果大小，参数越大涟漪越大
```
static SelectableBackground(rippleRadius: ?number)
```
5. SelectableBackgroundBorderless()
  
  会创建一个对象，表示安卓主题默认的对于被选中的无边框对象的背景
```
static SelectableBackgroundBorderless(rippleRadius: ?number)
```
6. Ripple() 会创建一个对象，当按钮被按下时产生一个涟漪状的背景，你可以通过 color 参数来指定颜色，如果参数borderless是 true，那么涟漪还会渲染到视图的范围之外（参见原生的 actionbar buttons 作为该效果的一个例子）。这个背景类型只在 Android API level 21+适用。
```
static Ripple(color: string, borderless: boolean, rippleRadius: ?number)
```
  名称类型必需说明
  color string 是 The ripple color
  borderless boolean 是 If the ripple can render outside it’s bounds
  rippleRadius ?number No controls the radius of the ripple effect
TouchableWithoutFeedback
1. 除非你有一个很好的理由，否则不要用这个组件。所有能够响应触屏操作的元素在触屏后都应该有一个视觉上的反馈（然而本组件没有任何视觉反馈），这也是为什么一个"web"应用总是显得不够"原生"的主要原因之一。

名称	类型	必需	说明
color	string	是	The ripple color
borderless	boolean	是	If the ripple can render outside it’s bounds
rippleRadius	?number	No	controls the radius of the ripple effect

温柔如你，生活如梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react-native部分组件、样式、事件

react-native中不存在div和span等标签，他中的标签需要从react-native中引出来，并且在View组件中不能直接写字符需要用标签滚动组件作用是展示需要滚动的视图，如果页面中需要滚动区域就不需要设置样式来改变滚动，只需要使用这个组件，如果列表数量不多就可以使用这个组件，如果数量多就需要使用这个组件高性能的分组(section)列表组件，支持下面这些常用的功能：完全跨平台。行组件显示或隐藏时可配置回调事件。支持单独的头部组件。支持单独的尾部组件。支持自定义行间分隔线。
复制链接

扫一扫