Try React Native for my first IOS app

1. It’s a shame that RN has been using this technology for the first time for so long. I have to say that it is much smoother than embedding H5 pages into App before.

2. Effect preview

3. Architecture construction

• 1. Use react- Native scaffolding

     npx react-native init XXXX --version X.XX.X
     Copy the code

• 2. Mac Installation

     brew install watchman
     brew install cocoapods
     Copy the code

     CocoaPods is a package manager written in Ruby (think of it as NPM for iOS). React Native iOS versions require CocoaPods to manage dependencies starting with version 0.60. You can install CocoaPods using the following command. The version of CocoaPods needs to be above 1.10.

     Install Xcode and select the version of the ios emulator. I chose 12

     So far the environment has been poor.

• 3. App architecture

     Use Mobx to store state values such as basic user information, whether a user is new, etc.

     Use the function component +React Hooks to complete the page

     Use React-Navigation to redirect the page

     Use third party components to complete the effects

3. Problems encountered

• 1. The teaset component was used in the project but failed to find/SRC /Easing when running

     In the new version of the react - native/Library/Animate nor under the SRC, so to modify teaset below components/ListRow/TouchableOpcity js the following path for import much the from 'react-native/Libraries/Animated/Easing';Copy the code

• 2. TabBarStyle XXXX undefined when using the react-native tab-navigator component in a project

     Check the source code (the React – native – TAB – the navigator/TabNavigation. Js) will be found

     export default class TabNavigator extends React.Component {
       staticpropTypes = { ... ViewPropTypes,sceneStyle: ViewPropTypes.style,
         tabBarStyle: TabBar.style,
         tabBarShadowStyle: TabBar.propTypes.shadowStyle,
         hidesTabTouch: PropTypes.bool
       };
     Copy the code

     Actually this is wrong, because there is no TabBar. Style, so change into

     . ViewPropTypes,sceneStyle: ViewPropTypes.style,
         tabBarStyle: ViewPropTypes.style,
         tabBarShadowStyle: TabBar.propTypes.shadowStyle,
         hidesTabTouch: PropTypes.bool
     Copy the code

• 3. Use custom fonts on ios

     You need to add custom fonts in Xcode

     Steps:

     1. Under the project target, select Build Phase —-> Copy Bundle Resources

        Then add your own font

     2. Under info.list, select Fonts Provided by Application

        Then add the missing font

• 4. No third-party SDK was found during build

     Look at the package path and paste the corresponding SDK below

4. Components have been encapsulated

• 1. Gradient button component

           <View style={{width: '90% ',height: 40.alignSelf: 'center'}} >
             <LinearGradientBtn 
                color={['#9b63cd', '#e0708c']} 
                style={{color:"#fff"}} 
                onPress={handlerAvatar}>Set head</LinearGradientBtn>
           </View>
     Copy the code

     The outer View controls the width of the button, and the color controls the gradient. If you don’t want a gradient, use the same color array

• 2. App header component

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

  Supports left return, text display, right part of the custom icon and operations

  DisplayLeft controls whether the display returns 🔙, title is the displayed text, rightText custom icon, and onRightPress binds the right part of the event

• 3. Font icon component

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

  Support Ali font icon, only need to write the class name can be

These components satisfy common functionality in most projects.

5. React basics

1. Function component
2. React Hooks

6. Code address

Github.com/Visupervi/i…