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

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

2. 效果预览

3. 架构搭建

使用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. 遇到的问题

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

在新版的react-native/Library/Animate下没有src,所以要修改teaset下面的components/ListRow/TouchableOpcity.js下面的路径为 import Easing from 'react-native/Libraries/Animated/Easing';

在项目中使用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. 已封装成组件

渐变button组件

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

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

App头部组件

 <AppHeader
    displayLeft={false}
    title={'消息'}
    rightText={<IconFont name="icontongxunlu" style={{ color: "#fff", fontSize: 20 }} />}
    onRightPress={handlerRightPress}
        >
</AppHeader>

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

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

字体图标组件

 <IconFont style={{fontSize: 20}} onPress={props.close} name="iconshibai"></IconFont>

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

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

5. React的基础知识

函数组件
React Hooks

6. 代码地址

github.com/Visupervi/i…