阅读 250

尝试使用React Native 做我的第一个IOS 应用

1. 很惭愧,RN出来那么久了第一次使用这个技术,不得不说确实比之前把H5页面嵌入到App中流畅的多。

2. 效果预览

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

3. 架构搭建

    1. 使用react-native 脚手架

      npx react-native init XXXX --version X.XX.X
      复制代码
    1. Mac环境安装

      brew install watchman
      brew install cocoapods
      复制代码

      CocoaPods是用 Ruby 编写的包管理器(可以理解为针对 iOS 的 npm)。从 0.60 版本开始 react native 的 iOS 版本需要使用 CocoaPods 来管理依赖。你可以使用下面的命令来安装 CocoaPods。CocoaPods的版本需要 1.10 以上。

      安装Xcode,选择ios模拟器的版本,我选择的是12

      至此环境搭建的已经差不错了。

    1. app架构

      使用Mobx 存储状态值,比如用户基本信息,是否是新用户等。

      使用函数组件+React Hooks 来完成页面

      使用React-Navigation完成页面路由跳转

      使用第三方组件完成特效

3. 遇到的问题

    1. 在项目中使用了teaset组件,但是运行的时候会报错找不到/src/Easing

      在新版的react-native/Library/Animate下没有src,所以要修改teaset下面的components/ListRow/TouchableOpcity.js下面的路径为 import Easing from 'react-native/Libraries/Animated/Easing';
      复制代码
    1. 在项目中使用React-native-tab-navigator组件会报 tabBarStyle xxxx undefined

      去翻看源码(React-native-tab-navigator/TabNavigation.js)会发现

      export default class TabNavigator extends React.Component {
        static propTypes = {
          ...ViewPropTypes,
          sceneStyle: ViewPropTypes.style,
          tabBarStyle: TabBar.style,
          tabBarShadowStyle: TabBar.propTypes.shadowStyle,
          hidesTabTouch: PropTypes.bool
        };
      复制代码

      其实这里是错误的,因为没有TabBar.style,所以修改成

      ...ViewPropTypes,
          sceneStyle: ViewPropTypes.style,
          tabBarStyle: ViewPropTypes.style,
          tabBarShadowStyle: TabBar.propTypes.shadowStyle,
          hidesTabTouch: PropTypes.bool
      复制代码
    1. 在ios中使用自定义字体

      需要在Xcode里面添加自定义字体

      步骤:

      1. 在项目 target下面选择Build Phase ----> Copy Bundle Resources

        然后添加上自己的字体

      2. 在Info.list 下面选择 Fonts provided by application

        然后把找不到的字体加上

    1. 在build的过程中报找不到第三方的SDK

      查看打包的路径,把对应的SDK粘贴到下面

4. 已封装成组件

    1. 渐变button组件

            <View style={{width: '90%', height: 40, alignSelf: 'center'}}>
              <LinearGradientBtn 
                 color={['#9b63cd', '#e0708c']} 
                 style={{color:"#fff"}} 
                 onPress={handlerAvatar}>设置头像
              </LinearGradientBtn>
            </View>
      复制代码

      外层View用来控制button的宽度,color来设置渐变色,不想要渐变那就color数组给相同的颜色

    1. App头部组件
     <AppHeader
        displayLeft={false}
        title={'消息'}
        rightText={<IconFont name="icontongxunlu" style={{ color: "#fff", fontSize: 20 }} />}
        onRightPress={handlerRightPress}
            >
    </AppHeader>
    复制代码

    支持左返回,中显示text, 右部分自定义图标与操作

    displayLeft控制是否显示返回🔙,title是显示的文字,rightText自定义图标,onRightPress绑定右部分的事件

    1. 字体图标组件
     <IconFont style={{fontSize: 20}} onPress={props.close} name="iconshibai"></IconFont>
    复制代码

    支持阿里字体图标,只需要写类名就可以

这些组件能满足大部分项目中的通用功能。

5. React的基础知识

  1. 函数组件
  2. React Hooks

6. 代码地址

github.com/Visupervi/i…

文章分类
前端
文章标签