React Native实战项目企业通信录（含视频教程）- 登录界面开发

最新推荐文章于 2024-05-13 09:40:51 发布

原创

最新推荐文章于 2024-05-13 09:40:51 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#android #ios #react

React Native实战项目企业通信录- 登录界面开发

React Native实战项目企业通信录- 登录界面开发

前言

上节课讲解了项目搭建，视频教程录制的不好，我会改进，接下来就是功能模块的开发了，这节课我们会把登录界面开发出来。

修改应用图标

首先我们要先准备一张PNG格式的图片，最号是1024*1024大小，图片长宽必须一样，否则会报错。

应用图标

把图片拷贝到app/assets/ 替换icon.png，然后执行Baker为我们提供的命令：

npm run icons

修改应用名称

修改Android应用名称

vim app/android/app/src/main/res/values/strings.xml

修改Android应用名称

修改IOS应用名称

vim app/ios/AdressBook/Info.plist

修改IOS名称

使用Navigator

因为我们APP有多个页面，比如登录，主页面，添加员工信息，发送通知等等，所以我们要使用到导航，RN官方的Navigator对怎么使用倒是做了介绍，大家去看一下。

这里我给大家简单理一下思路：

1. 在根组件中引入Navgitor以及第一个要展示的组件：

const { View, Text, Navigator} = 'react-native';
import FirstPage from '../FirstPage';

2. 想好导航跳转时路由的信息：

{
    component: //需要跳转到的组件（必须）
    title: //导航栏的文字（必须）
    rightButtonClick: //点击导航栏右边按钮调用的函数。（可有可无、没有这个参数的话，就不渲染右边的按钮）
    type: //页面跳转时的动画效果。（可有可无，没有设置该参数的化就使用默认方式）
    passProps: //传递的参数
}
这里没有设置左键的相关信息，是因为我们想把左键写死了，就一个按钮，调用pop函数就可以了。
//type有以下几种类型
Navigator.SceneConfigs.PushFromRight (default)
Navigator.SceneConfigs.FloatFromRight
Navigator.SceneConfigs.FloatFromLeft
Navigator.SceneConfigs.FloatFromBottom
Navigator.SceneConfigs.FloatFromBottomAndroid
Navigator.SceneConfigs.FadeAndroid
Navigator.SceneConfigs.SwipeFromLeft
Navigator.SceneConfigs.HorizontalSwipeJump
Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
Navigator.SceneConfigs.HorizontalSwipeJumpFromLeft
Navigator.SceneConfigs.VerticalUpSwipeJump
Navigator.SceneConfigs.VerticalDownSwipeJump

3. 在根组件中使用Navigaor：

class App extends Component {
  configureScene(route, routeStack) {
    if (route.type == 'Bottom') {
      return Navigator.SceneConfigs.FloatFromBottom; // 底部弹出
    }
    return Navigator.SceneConfigs.PushFromRight; // 右侧弹出
  }
  renderScene(route, navigator) {
    return <route.component navigator={navigator}  {
    
    ...route.passProps} />;
  }

  render() {
    return (
      <View style={styles.container}>
        <<