从android迁移到ios react-native

Question

I have an app completed using Android and react-native and I am starting to work on the ios version with react-native. Are there going to be any new road blocks with this change? And is it most likely that I should be able to reuse most - if not all of my react-native code while working on the ios version, Cheers.

Answer 1

Yes you can reuse most of your js code. If you are using native libraries you will have to run "react-native link" to link with the native code.

Answer 2

Well, the main purpose of react-native is to write "Almost" the same code which for both platforms. However, there are probably going to be several differences in the way, including:

1. StatusBar

It is probably going to be the first thing that you notice. In Android, you do not need to handle the status bar and the app automatically starts below the status bar, However in IOS, the app starts from the top of the screen, and you will probably see the time and battery in the middle of your header. you probably need to give a paddingTop to your header or use, "StatusBar" Module from react-native to handle this issue.

https://facebook.github.io/react-native/releases/0.31/docs/statusbar.html

2. Shadow and Elevation

As you might have noticed, there are some shadow stylings, which do not have any effect on the shape and appearance of your components. In Android devices "Elevation" is used to make an illusion of 3d Effects on layers. However, in IOS you need to use shadow properties such as, shadow radius, shadow color and ... to make a good looking component.

https://facebook.github.io/react-native/docs/shadow-props.html

3. UI-UX Design

There are some structural differences between Android and IOS platforms, which will result in a slight (or sometimes major) UI-UX differences.

• For example, there is no physical back button in iPhones. As a result, you cannot rely on a physical back button and you need to put a go back button on every page.

• Additionally, generally speaking, IOS apps do not have a drawer, and you need to think about this.

• Several modules are built specifically for one platform, such as datepickerios. The original picker in IOS platform is a smooth wheelpicker, and the datepicker is also different with android, so u have to have these modules in mind.

• Moreover, if you installed any other npm modules, check their github page to see, if there is any special guide on linking and usage in different platforms

Ps. I think it is better to take a look at the app and check for possible bugs, then try to have on eye on API sections in the react-native web page for platform specific codes.