React Native开发记录

1、页面常用的引入组件和方法

    

        import React, { Component } from 'react'

        import { connect } from 'react-redux'

        import {

        View,    

        Text,

        Alert,

        TouchableOpacity,

        Dimensions,

        StyleSheet,

        DeviceEventEmitter,

        } from 'react-native'

        import { List, SwipeAction } from '@ant-design/react-native'  // UI组件

        import moment from 'moment'  // 时间格式化

        import { Theme } from '~/utils'  // 颜色

        import { compu    teStatusBarAndNavHeight } from '../components/commonFun'  // 计算状态栏和导航栏高度

    

        import SvgIcon from '~/components/display/icon/SvgIcon'   // svg图片

        import WithGlobalLoading from '../components/HOC/WithGlobalLoading'   // 懒加载

        import WithWaterMark from '~/components/hoc/withWatermark'  //  页面水印

        import { HeaderBackButton } from 'react-navigation'   // 头部导航

        import { AntIcons, Ionicons } from '~/components'  // 图标

        import { ReduxProps } from '~/types'    // TestypScript 

        import { cseRolesMap } from '../components/constants'  // 权限

        import LazyLoadList from '../components/LazyLoadList'   // 分页组件

      const { width: fullWidth, height: fullHeight } = Dimensions.get('window')  // 页面高度

    使用权限

        const {

        roleAdmin,

        roleSeniorMgr,

        roleDeptMgr,

        roleLeader,

        roleService,

        rolePrdMgr,

        roleClientMgr,

        roleInvestMgr,

        roleVisitor,

        } = cseRolesMap

        interface State {}

        @connect(({ app, cse, cse$inre, cse$plge, cse$edpl }) => ({

            app,

            cse,

            cse$inre,

            cse$plge,

            cse$edpl,

        }))

        @WithWaterMark()

        @WithGlobalLoading

    class ExPlanList extends Component<ReduxProps, State> {

        constructor(props) {

        super(props)

        this.state = {}

        static navigationOptions = ({ navigation }) => {

        return {

        headerRight: (

        <View style={{ marginRight: 10 }}>

        <TouchableOpacity>

        {/* 客户经理 */}

        <PopoverState

        handleCheckMessageType={code =>

        navigation.state.params &&

        navigation.state.params.propsFunc(code)

        }

    />

    </TouchableOpacity>

    </View>

    ),

        headerLeft: (

        <HeaderBackButton

        tintColor="#ffffff"

        title="取消"

        onPress={() => {

        navigation.navigate('CseIndex')

        DeviceEventEmitter.emit('unreadlist')

        DeviceEventEmitter.emit('initIndexChartData')

        }}

        />

        ),

        }

        }

            componentDidMount() {

            // 计算状态栏和导航栏高度

            computeStatusBarAndNavHeight(TOP_MARGIN => {

            this.setState({

            TOP_MARGIN,

            })

            })

            }

            }

    接口调用 

        const {

        dispatch,

        app,

        app: {

        loginUserInfo: { roles, loginName },

        },

        cse: { cseRole },

        } = this.props

        dispatch({

        type: 'cse$inre/getListlData', // service.getIndexPageAuthor

        payload: { p13Id: loginName },

        })

        跳转页面

        const { navigation } = this.props

        this.initModel()

        navigation.navigate({

        routeName: 'ExPlanInsert',

        })

    }

        UNSAFE_componentWillMount() {}

        componentWillUnmount(){}

        

        mode使用的组件

        import modelExtend from "~/libs/dva-model-extend"

        import { service } from "~/services/cse/index.js"

        import { createAction, delay } from "~/utils"

        import { born } from "../base"

        import { Toast } from "@ant-design/react-native"

        import { DvaModelType, InreListType } from "~/types" --类型定义

       import _ from "lodash"

        const namespace = 'cse$edrd'

        

        const model: DvaModelType<CseEditRecordStateType> = {

        namespace,

        state: {}

        effects: {

        *initPage({ payload = {} }, { call, put, select }) {

        const app = yield select(_ => _.app)

        // 获取options

        yield put({

        type: 'cse$edpl/getOcrmCommuplanInfoOptions',

        })

        },