react+redux+react-router构建移动端面板页（回顾）

1. 移动端面板结构：

（1）顶部导航组件

（2）底部tab跳转组件

（3）中部路由页展示组件

2. 初始化导航组件和底部tab跳转链接组件

（1）通过指定的json数据结构，初始化导航，底部链接，以及底部tab切换图标交互

（2）初始化导航：

<NavBar mode=“dark">{navList.find(v=>v.path===pathname).title}</NavBar>

（3）初始化底部tab:

<TabBar>

  {navList.map(v=>(

      <TabBar.Item

        title={v.title}

        key={v.path}

        icon={ { uri: require('@/public/images/navlink/'+v.icon+'.png') } }

        selectedIcon={ {uri: require('@/public/images/navlink/'+v.icon+'-active.png')} }

        selected={ v.path === pathname }

        badge={1}

        onPress={() => {

          this.props.history.push(v.path);

        }}

        data-seed="logId"

      >

    </TabBar.Item>

  ))}

</TabBar>

（4）定义统一的 json 数据结构（对应页面的结构）:

const navList = [

    {

        path: '/manager',

        text: '职员',

        icon: 'worker',

        title: '职员列表',

        compontent: Manager,

        hide: user.type === 'worker'

    },

    {

        path: '/worker',

        text: '管理员',

        icon: 'manager',

        title: '管理员列表',

        compontent: Worker,

        hide: user.type === 'manager'

    },

    {

        path: '/msg',

        text: '消息',

        icon: 'msg',

        title: '消息列表',

        compontent: Msg

    },

    {

        path: '/me',

        text: '我',

        icon: 'user',

        title: '个人中心',

        compontent: User

    }

];

（5）职员列表组件开发：

将数据存储在redux 中进行管理，在组件中调用reducer获取数据，再渲染组件列表

使用 Card 组件：

this.props.userlist.map(v=>(
	    <WingBlank size="lg" key={v._id}>
			<WhiteSpace size="lg" />
			<Card>
			  <Card.Header
			    title={v.user}
			    thumb={ require('@/public/images/avatar/'+v.avatar+'.png') }
			    extra={<span>{v.title}</span>}
			  />
			  <Card.Body>
			    <div>{v.demands}</div>
			  </Card.Body>
			  <Card.Footer content={v.type === 'worker' ? v.self : ‘'} extra={<div>right bottom </div>} />
			</Card>
			<WhiteSpace size="lg" />
		</WingBlank>
))}

新增用户管理redux文件：manageUser.redux.js ;

功能：1. 根据用户的type，获取用户列表 2. 在状态树中更新用户列表信息

import axios from 'axios'

const USER_LIST = 'USER_LIST';

const initState = {
	userlist: []
};

//reducer
export function chatuser(state=initState,action){
    switch(action.type){ 
    	case  USER_LIST:
    		return {...state,userlist:action.payload};  
        default:
            return state;
    }
}

// userlist
function userList(data){
	return { type:USER_LIST, payload:data };
}

//获取userlist
export function getuserList(type){

	return dispatch=>{
		axios.get('/user/list',{ 
			params: {
		      type: type
		    }
		}).then(res=>{
			if(res.data.code === 0){
				
				dispatch(userList(res.data.data));
			}
		})
	}
}

（6）预览效果：

（7）管理员列表：（类似于上面职员列表）

react+redux+react-router构建移动端面板页（回顾）

猜你喜欢