React-Native部分API学习

一、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传递过去

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设备。进行设置状态栏文字的颜色
 

四、TouchableOpacity

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


  {this._renderRowTag()}

五、Button

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

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

// 按钮的样式,可以设置背景颜色,圆角、等属性

 

六、FlatList

除以下示例中注释API:

  • renderItem:固定回调的参数:item,index,separators
  • ListEmptyComponent:需要返回一个Component,数据为空的时候的组件
  • ListHeaderComponent: 需要返回一个Component,头部组件,需要注意他不是刷新的那个组件,只是一个不同于普通item的头部组件
  • horizontal: 一个布尔值,true是水平,false是垂直,默认false
  • numColumns:是一个number,表明该FlatList是几列
  • ItemSeparatorComponent: 需要返回一个Component,作为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={
    
} // 下拉刷新的控件返回,如果需要自定义的话,可实现
/>

另外提供的一些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系统生效
我是标题
// 标题加粗
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 (
    
        
           
               //内容滚动部分
                        
        
           
               //悬浮按钮的部分  
               

十、TextInput

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

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

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

// render部分,自定义控件整体

    {title}
    
         
        
    

// 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绘制线条,这一常量定义了当前平台上的最细的宽度。可以用作边框或是两个元素间的分隔线
    },
})

持续更新

你可能感兴趣的:(前端知识学习,iOS,跨平台,reac)