React-Native部分API学习

最新推荐文章于 2024-04-19 10:17:59 发布

yuge486

最新推荐文章于 2024-04-19 10:17:59 发布

阅读量693

点赞数

分类专栏：前端知识学习 iOS 跨平台 reac

本文链接：https://blog.csdn.net/yuge486/article/details/81559184

版权

前端知识学习同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

iOS

8 篇文章 0 订阅

订阅专栏

跨平台

3 篇文章 0 订阅

订阅专栏

一、react-navigation

https://reactnavigation.org/docs/zh-Hans/navigating.html

1、常见的导航分类

StackNavigator ：类似于普通的Navigator，屏幕上方导航栏
TabNavigator：obviously, 相当于iOS里面的TabBarController，屏幕下方标签栏
DrawerNavigator：抽屉效果，左侧滑出这种效果。

2、集成

 npm install react-navigation --save

3、初始化路由，createStackNavigator（老式写法：~~StackNavigator~~）

import { createStackNavigator } from 'react-navigation';
const AppNavigator = createStackNavigator(StackRouteConfigs, StackNavigatorConfigs);

4、StackNavigator+TabNavigator结合使用实现页面跳转以及传参

问题：子页面跳转到详情页面时，this.props.navigation中报错undefined

this.props.navigation.navigate('Detail')

解决：在配置子页面时将当前的this.props传递过去

<Component {...this.props} />

5、隐藏顶部导航栏以及底部tabbar实现：

 static navigationOptions = {
    tabBarVisible: false, // 隐藏底部导航栏
    header:null,  //隐藏顶部导航栏
  };

6、属性介绍

navigationOptions：配置StackNavigator的一些属性。
    title：标题，如果设置了这个导航栏和标签栏的title就会变成一样的，不推荐使用
    header：可以设置一些导航的属性，如果隐藏顶部导航栏只要将这个属性设置为null
    headerTitle：设置导航栏标题，推荐
    headerBackTitle：设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为null
    headerTruncatedBackTitle：设置当上个页面标题不符合返回箭头后的文字时，默认改成"返回"
    headerRight：设置导航条右侧。可以是按钮或者其他视图控件
    headerLeft：设置导航条左侧。可以是按钮或者其他视图控件
    headerStyle：设置导航条的样式。背景色，宽高等
    headerTitleStyle：设置导航栏文字样式
    headerBackTitleStyle：设置导航栏‘返回’文字样式
    headerTintColor：设置导航栏颜色
    headerPressColorAndroid：安卓独有的设置颜色纹理，需要安卓版本大于5.0
    gesturesEnabled：是否支持滑动返回手势，iOS默认支持，安卓默认关闭
screen：对应界面名称，需要填入import之后的页面
mode：定义跳转风格
   card：使用iOS和安卓默认的风格
   modal：iOS独有的使屏幕从底部画出。类似iOS的present效果
headerMode：返回上级页面时动画效果
   float：iOS默认的效果
   screen：滑动过程中，整个页面都会返回
   none：无动画
cardStyle：自定义设置跳转效果
   transitionConfig： 自定义设置滑动返回的配置
   onTransitionStart：当转换动画即将开始时被调用的功能
   onTransitionEnd：当转换动画完成，将被调用的功能
path：路由中设置的路径的覆盖映射配置
initialRouteName：设置默认的页面组件，必须是上面已注册的页面组件
initialRouteParams：初始路由参数

// 定义配置
let StackNavigatorConfig = {
  headerMode: 'float', // 返回上级页面时动画效果: float：iOS默认的效果/screen：滑动过程中，整个页面都会返回/none：无动画
  navigationOptions: {
    headerBackTitle: null, // 设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为null
    headerStyle: { // 设置导航条的样式。背景色，宽高等
      backgroundColor: '#fff',
    },
    headerTitleStyle: { // 设置导航栏文字样式
      fontWeight: 'normal',
      fontSize: 17,
      color: '#333',
    },
  },
};

// 使用
const NavigatorHeaderComponent = createStackNavigator(routes, StackNavigatorConfig);

二、StackViewStyleInterpolator

react-navigation升级2.0后，更改页面切换动画API发生改变,原本是使用~~CardStackStyleInterpolator~~的，更改后为StackViewStyleInterpolator

// 原： 
import CardStackStyleInterpolator
from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';
// 新：
import StackViewStyleInterpolator
from "react-navigation/src/views/StackView/StackViewStyleInterpolator";

三、Dimensions、StatusBar

import {
    Dimensions, // 用来获取屏幕的宽高
    StatusBar, // 设置导航栏的颜色
} from 'react-native';

// 获取屏幕的宽高
const {
    width,
    height
} = Dimensions.get('window');

// 设置状态栏的颜色为白色
// barStyle  enum('default','light-content')  枚举类型，仅支持iOS设备。进行设置状态栏文字的颜色
<StatusBar barStyle={'light-content'} />

四、TouchableOpacity

本组件用于封装视图，使其可以正确响应触摸操作。当按下的时候，封装的视图的不透明度会降低

<TouchableOpacity onPress={this._onPress.bind(this)} activeOpacity={1}>
  {this._renderRowTag()}
</TouchableOpacity>

五、Button

onPress方法是必须实现的，不实现会有警告

不能直接设置style，需要在外层放一个View来设置样式

// 按钮的样式，可以设置背景颜色，圆角、等属性
<View style={styles.buttonStyle}>
 <Button
   title='按钮名称'
   color='#68758e'
   onPress={() => console.log('点击了按钮')}
 />
</View>

六、FlatList

除以下示例中注释API：

renderItem：固定回调的参数：item,index,separators
ListEmptyComponent：需要返回一个Component，数据为空的时候的组件
ListHeaderComponent： 需要返回一个Component，头部组件，需要注意他不是刷新的那个组件，只是一个不同于普通item的头部组件
horizontal： 一个布尔值，true是水平，false是垂直，默认false
numColumns：是一个number，表明该FlatList是几列
ItemSeparatorComponent： 需要返回一个Component，作为item之间的分割线

<FlatList
  data={this.state.list} // 数据源
  keyExtractor={(item) => item.id.toString()} // 返回一个独立Item的唯一标识，需要返回一个index
  renderItem={this._renderItem} // 渲染每行
  ListFooterComponent={this._renderFooter} // footer组件，可以用来实现“上拉加载”
  onEndReachedThreshold={0.1} // 决定当距离内容最底部还有多远时触发onEndReached回调
  onEndReached={this._onRefreshMore} // 当列表达到底部的回调，用来实现“上拉加载”
  refreshing={this.state.refreshing} // “下拉刷新需实现”,控制是否处于刷新状态
  onRefresh={this._onRefresh} // “下拉刷新需实现”,触发刷新的回调
  refreshControl={
    <RefreshControl
      refreshing={this.state.refreshing}
      onRefresh={this._onRefresh}
      title="加载中..."
 />
} // 下拉刷新的控件返回，如果需要自定义的话，可实现
/>

另外提供的一些scroll方法，比如滚动到底部，滚动到具体item，滚动多少距离等

scrollToEnd //滚动到底部
scrollToIndex //滚动到第几个item
scrollToItem //滚动到某个item 
scrollToOffset //滚动多少距离
recordInteraction //告诉列表滚动发送了，会去调用viewability的计算。
flashScrollIndicators //随时显示滚动指示器

可以对列表的“下拉刷新”和“上拉加载”进行封装使用，以后另开帖子说明，参考的网站如下：

https://www.jianshu.com/p/2738736b0390

https://juejin.im/post/5afaf2786fb9a07abf72acb3

七、Text

ellipsizeMode 文本应该如何被截断，需要注意的是，它必须和numberOfLines（文本显示的行数）搭配使用，才会发挥作用。默认值为tail
  head：从文本的开头进行截断，并在文本的开头添加省略号，例如：…xyz。
  middle ：从文本的中间进行截断，并在文本的中间添加省略号，例如：ab…yz。
  tail：从文本的末尾进行截断，并在文本的末尾添加省略号，例如：abcd…。
  clip ：文本的末尾显示不下的内容会被截断，并且不添加省略号，clip只适用于iOS平台
numberOfLines 文本显示的行数，默认可多行展示
selectable  默认值为false，为true时可以被选择并复制到系统剪切板中
selectionColor 文本被选择时的高亮颜色	Android系统生效
adjustsFontSizeToFit 默认值为false，为true时字体会自动缩小，以适应给定的样式约束	iOS系统生效
minimumFontScale adjustsFontSizeToFit属性为true时，设置字体的最小缩放比例，取值范围为0.01~1.0	iOS系统生效

<Text style={styles.titleStyle}>我是标题</Text>

// 标题加粗
titleStyle: {
   marginLeft: 12, // 距离左边边距
   color: '#000000', // 文字颜色
   fontSize:16, // 文字大小
   fontWeight: "bold", // 加粗
   width: 100 // 文字宽度
}

八、FlexBox布局在RN中的基本用法

参考链接：https://www.jianshu.com/p/4a61a517c792

九、实现悬浮按钮

问题：React Native中position只有absolute和relative两个值；并没有fixed值

解决：将这个悬浮按钮写在ScrollView外部即可

参考链接：https://blog.csdn.net/SpicyBoiledFish/article/details/79613181

return (
    <View>
        <ScrollView>
           <View>
               //内容滚动部分
           </View>             
        </ScrollView>
           <View>
               //悬浮按钮的部分  
               <Button />
           </View>
    </View>
);

十、TextInput

问题：TextInput控件在未设置宽度时候会出现超出屏幕的情况，且直接设置控制的marginRight:12不生效，如下图所示

解决：若要实现如下图所示效果，且文本框距离右侧有12px的宽度：

此处注意“justifyContent: 'space-between'”样式的两端对齐，相对于两个元素的生效，将右侧（inputText+12px的空白View）封装成一个View

// render部分，自定义控件整体
<View style={styles.inputTextContainer}>
    <Text style={styles.inputTitleStyle}>{title}</Text>
    <View style={styles.inputRightStyle}>
        <TextInput
            style={styles.inputTextStyle}
            placeholder='请输入'
            underlineColorAndroid="transparent"
        /> 
        <View style={styles.inputRightViewStyle} />
    </View>
</View>

// css样式部分
const styles = StyleSheet.create({
    // 输入框内容
    inputContainer: {
        marginTop: 10
    },
    // 一行的输入框内容
    inputTextContainer: {
        flexDirection: 'row',
        height:58,
        backgroundColor: '#ffffff',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    // 文本框标题部分
    inputTitleStyle: {
        fontSize: 16,
        color: '#20304b',
        marginLeft: 12,
        width: '30%'
    },
    // 文本框右侧部分
    inputRightStyle: {
        flexDirection: 'row',
        width: '70%'
    },
    // 文本框
    inputTextStyle: {
        fontSize: 16,
        marginLeft: 12,
        paddingLeft: 5,
        paddingRight: 5,
        textAlign: 'right',
        width: '88%'
    },
    // 文本框右侧12px的宽度
    inputRightViewStyle: {
        width: 12,
    }
})

十一、StyleSheet

提供CSS样式表，使代码布局清晰

使用属性hairlineWidth用来绘制线条

const styles = StyleSheet.create({
    // 分割线样式
    separatorStyle: {
        backgroundColor: '#dfdfdf',
        height: StyleSheet.hairlineWidth, // 属性hairlineWidth绘制线条,这一常量定义了当前平台上的最细的宽度。可以用作边框或是两个元素间的分隔线
    },
})

持续更新