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
-
-
Use react- Native scaffolding
npx react-native init XXXX --version X.XX.X Copy the code
-
-
-
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.
-
-
-
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
-
-
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
-
-
-
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
-
-
-
Use custom fonts on ios
You need to add custom fonts in Xcode
Steps:
-
Under the project target, select Build Phase —-> Copy Bundle Resources
Then add your own font
-
Under info.list, select Fonts Provided by Application
Then add the missing font
-
-
-
-
No third-party SDK was found during build
Look at the package path and paste the corresponding SDK below
-
4. Components have been encapsulated
-
-
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
-
-
- 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
-
- 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
- Function component
- React Hooks
6. Code address
Github.com/Visupervi/i…