分享一个用ReactNative写的仿微信客户端的APP(带截图)



  • 简介

    RNWeChat是我在空余时间利用ReactNative开发的一款高仿微信的APP,目前服务端代码在同步开发,已经实现的功能包括登录、注册、修改用户头像、发朋友圈,其他的如单聊群聊等暂时还未实现,后续会继续开发,下面放上客户端代码地址:

    注意

    如果各位在Mac或者Linux下调试时,出现如下错误
    0_1506092150747_error.jpg
    请确保项目的android目录下的gradlew文件有可执行权限,好多朋友遇到这种问题

    运行方法

    1. 在项目根目录下执行npm install
    2. 项目中的导航组件使用的ReactNavigation,所以还需要执行npm install --save react-navigation
    3. 二维码扫描组件使用了开源项目react-native-camera和AC-QRCode-RN,即时通讯使用了网易云react-native-netease-im库,图片选择和裁剪使用了react-native-image-crop-picker库,请按这四个项目的文档添加至项目中,地址为:
    1. 上面几步执行结束后,再执行react-native run-android即可
    2. apk目录下有RNWeChat-release.apk文件,可直接安装查看效果

    注意

    打release包时请使用自己的签名文件和签名配置,请注意android/app/build.gradle文件中的

    signingConfigs {
        release {
            storeFile file(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }
    

    更新

    • 2017-6-8 修改联系人数据从服务端获取,包括联系人姓名、头像等,其他部分数据暂时为测试数据
    • 2017-8-11 加入扫一扫功能,加入登录注册页面,登录和注册的功能后面实现,加入购物页面和卡包页面
    • 2017-8-15 加入注册、登录和注销功能,可以注册新用户,下一步考虑接入环信SDK实现IM功能IM功能采用了网易云信SDK
    • 2017-8-18 修改注册和登录功能,加入了网易云信SDK
    • 2017-8-24 加入个人信息页面,加入修改头像的功能
    • 2017-8-29 完成发朋友圈的功能

    下面是截图:

    image
    image
    image
    image
    image
    image



  • 大哥 我拉取下来, 直接react-native run-android , 不得行哦??



  • 在运行之前要先npm install 才行,然后再运行你之前的命令



  • 还要添加一个 npm install --save react-navigation 的命令行



  • 不错,研究研究,多向你学习



  • @youxdd
    得先在项目根目录下执行npm install



  • 那两步 执行了, 还是不行呀(自己的项目能运行,不是环境的问题)
    0_1496464730051_QQ截图20170603123826.png



  • @youxdd
    sorry,这个是签名的问题,因为我打release包的时候配置了签名文件,你没有签名文件和配置文件,所以报错了。你直接在android/app目录下修改build.gradle文件,注释掉下面4行代码即可:
    storeFile file(MYAPP_RELEASE_STORE_FILE)
    storePassword MYAPP_RELEASE_STORE_PASSWORD
    keyAlias MYAPP_RELEASE_KEY_ALIAS
    keyPassword MYAPP_RELEASE_KEY_PASSWORD
    如果你想打release包,则不注释以上代码,请参考这篇文章:http://www.jianshu.com/p/32a99c273be1



  • 我运行起来了,但是会报这个错误0_1496571828459_微信图片_20170604182115.jpg 这是什么原因啊?



  • @ChaosXusu
    报错的信息不是有写出来嘛,英文也不难看懂吧,你自己对照着错误信息看看,是不是启动server的路径搞错了之类的



  • 楼主你好 是不是只有安卓没有ios版本的呀



  • @Dreamhai
    Android和iOS应该可以共用一套代码的,由于我在Windows上开发,所以只适配了Android,iOS我没测试过,你可以试试把index.android.js的内容复制到index.ios.js里,看跑在iOS上行不行



  • 安卓始终跑不起来,我把代码拷贝到ios.js里后,iOS能跑起来,虽然有一些报错,安卓始终提示Could not install the app on the device, read the error above for details.
    Make sure you have an Android emulator running or a device connected and have
    set up your Android development environment:
    https://facebook.github.io/react-native/docs/android-setup.html,不过我自己初始化的项目能跑



  • @caoyunxiao
    安卓的错误提示你确保有一个正在运行的Android模拟器或者已连接的手机,请按照官方文档配置Android的开发环境,用AndroidStudio自带的模拟器最好,如果用真机,你需要让手机跟PC在同一个局域网内,并在手机上设置代理的IP和端口



  • 代码在码云上也托管了一份,希望看到的同学能给个star,谢谢,代码地址:http://git.oschina.net/yubo725/RNWeChat



  • 0_1502958315251_image.png
    这里好像是一段无效的代码,我猜是你测试的时候写的,无法遍历出想要的结果



  • 此回复已被删除!


  • 此回复已被删除!


  • 怎么好友列表加载不出来,出现了syntaxerror:JSON Parse error。Unrecognized token ‘<’



  • @CrazyWL
    感谢指出问题,确实是一段无用的代码,可以删掉



  • @aLazy
    可能是我服务端在调试导致的,你现在再试应该是可以获取数据的


登录后回复