关于React Native 仿微信界面设计

系列文章目录

了解一个框架最好的方式是自己动手，算是学习提升的一种快速方式，这里简单简述一些过程。

---

提示：由于使用的库比较多，前面的文章《关于React native Demo项目的总结》也有写些库的使用，这样不再说明。

---

一、使用库

"dependencies": {
    "@babel/plugin-proposal-decorators": "^7.14.5",
    "@react-native-async-storage/async-storage": "^1.15.5",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/bottom-tabs": "^5.11.11",
    "@react-navigation/native": "^5.9.4",
    "@react-navigation/stack": "^5.14.5",
    "aurora-imui-react-native": "^0.14.0",
    "jcore-react-native": "^1.9.2",
    "jmessage-react-plugin": "^3.2.0",
    "mobx": "^6.3.2",
    "mobx-react": "^7.2.0",
    "pinyin": "^2.10.2",
    "react": "17.0.1",
    "react-native": "0.64.2",
    "react-native-elements": "^3.4.2",
    "react-native-fs": "^2.18.0",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-image-header-scroll-view": "^1.0.0",
    "react-native-reanimated": "^2.2.0",
    "react-native-safe-area-context": "^3.2.0",
    "react-native-screens": "^3.4.0",
    "react-native-vector-icons": "^8.1.0"
  },

二、使用步骤

1.设置导航路由

 <View style={{flex:1}}>
          <Provider RootStore ={RootStore} UserStore={UserStore}>
            <Routers></Routers>
          </Provider>
      </View>

export default class Routers extends Component {
    constructor(props){
        super(props);
        this.state={
            initialRouteName:"menuBar"
        }
    }
    render() {
        const {initialRouteName}=this.state;
        return (
            <NavigationContainer>
                <Stack.Navigator headerMode="none" initialRouteName={initialRouteName}>
                    <Stack.Screen name='menuBar' component={MenuBar} />
                    <Stack.Screen name='chatInfo' component={Chat} />
                    <Stack.Screen name='search' component={Search} />
                    <Stack.Screen name='user' component={User} />
                    <Stack.Screen name='circle' component={Circle} />
                </Stack.Navigator>
               
            </NavigationContainer>
        )
    }
}

2.加载底部菜单

<Tab.Navigator
                tabBarOptions={{
                    activeTintColor: '#04BE02',
                    inactiveTintColor: '#333',
                }}
            >
                <Tab.Screen 
                    name="知己" 
                    component={Confidant}
                    options={{
                        tabBarLabel: '知己',
                        title:null,
                        tabBarIcon: ({ focused,color,size }) => (
                            focused?<IconFont name="icon-wechat-fill" style={{fontSize:24,color:color}} />
                            :<IconFont name="icon-wechat" style={{fontSize:24,color:color}} />
                        ),
                    }}
                />
                <Tab.Screen 
                    name="通讯录" 
                    component={AddressList}
                    options={{
                        tabBarLabel: '通讯录',
                        tabBarIcon: ({ focused,color,size }) => (
                            focused?<IconFont name="icon-address-list-fill" style={{fontSize:24,color:color}} />
                            :<IconFont name="icon-address-list" style={{fontSize:24,color:color}} />
                        ),
                    }}
                />
                <Tab.Screen 
                    name="发现"
                    component={Find}
                    options={{ tabBarBadge: 3 }}
                    options={{
                        tabBarLabel: '发现',
                        tabBarIcon: ({ focused,color,size }) => (
                            focused?<IconFont name="icon-find-fill" style={{fontSize:24,color:color}} />
                            :<IconFont name="icon-find" style={{fontSize:24,color:color}} />
                        ),
                    }}
                />
                <Tab.Screen 
                    name="我" 
                    component={My}
                    options={{
                        tabBarLabel: '我',
                        tabBarIcon: ({ focused,color,size }) => (
                            focused?<IconFont name="icon-my-fill" style={{fontSize:24,color:color}} />
                            :<IconFont name="icon-my" style={{fontSize:24,color:color}} />
                        ),
                    }}
                />
          </Tab.Navigator>

3. 设置mobx 状态存储

import { observable, action } from "mobx";

class UserStore {
  @observable user = {};

  @action setUser(user) {
    this.user = user;
  }

  // 清除用户信息
  @action clearUser() {
    this.user = {};
  }
}

export default new UserStore();

4.代码结构

index.js

export default class Index extends Component {
    render() {
        return (
            <View>
                <StatusBar backgroundColor="transparent" translucent />

                <ConfidantHeader></ConfidantHeader>
                
                <ConfidantContent></ConfidantContent>
            </View>
        )
    }
}

头部

export default function Index() {
   
    return (
        <View>
            <Header
                leftComponent={{ text:"知己(10)", style: {...Style.leftComponent} }}
                rightComponent={
                   <RightComponent></RightComponent>
                }
            />
        </View>
    )
}

5.说明

完整的代码已放入GitHub：https://github.com/cyzadyx/RnWechat.git

总结

展示一下实现效果，这里这做了部分界面，要想把整体页面都做了，时间不允许。