Preface
After a period of development, a sufficient number of people have tried it. There are a few batches around me, and there are also different praises and criticisms:
① Make UI fast
② There are still many restrictions, it is better to be native Native
③ Simple to get started, allowing the front-end to quickly develop apps
④ Most of the codes of iOS & Android are common
⑤ Code-push can be used for hot updates, but it is still a trick to use it if it is not used well
......
After getting some information, it can be seen that it is possible to use RN to make a relatively good app efficiently. Just look at whether the investment is reasonable and the initial design is reasonable. Moreover, there are many documents on React Native now, so it may be a good choice to enter RN at this stage.
As we all know, most existing projects are not built from scratch, and introducing React Native based on the original projects is definitely different from creating projects with react-native init xxx. Therefore, let’s talk about the specific operation below. However, before you really start, you still need to explain the tool configuration first.
- NodeJS: Select the corresponding system to download and install, and you can run the npm command in the terminal after installation.
- Configuring the source, as we all know, it is best to configure domestic sources because of walls.
The configuration method is as follows:
npm config set registry --global npm config set disturl /dist --global
1. Add files and files
Generally, we can create files and files in the project root directory.
The file is similar to that in Android, where it mainly configures the dependency library required for React Native and some script statements. The following code can be regarded as a template for a file, and the version number can be determined according to your needs.
{
"name": "XXX",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/ start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0",
"react-native": "0.50.3",
"react-native-device-info": "^0.12.1"
},
"devDependencies": {
"babel-jest": "21.2.0",
"babel-preset-react-native": "4.0.0",
"jest": "21.2.1",
"react-test-renderer": "16.0.0"
},
"jest": {
"preset": "react-native"
}
}
The file is the entry file of the RN program. Usually the files are as follows:
import React,{Component} from 'react';
import {
AppRegistry,View,Text,
} from 'react-native';
class App extends Component{
//...Other methods render(){
return(
<View>
<Text>this is React Native Page</Text>
</View>
);
}
//...Other methods}
('XXX', () => App);
Then, open the terminal in this directory, run the npm i command, and install the dependencies required for React Native. After the installation is completed, the node_modules folder will be created in the root directory, and the downloaded dependencies are in this folder. At this point, the first step has been completed.
------Separation line-----
In fact, we will not put RN code into Android projects, because in general company projects, SVN or Git is used for management. There are two directories in the client directory that are Android and iOS that are distinguished between the two ends. As a cross-platform framework, React Native is not suitable for Android or iOS directories. Therefore, I personally think that the better way is to create a ReactNative directory in the directory of Android and iOS and place the code of the RN project. Therefore, the directory structure is roughly as follows:
. ├──Android ├──trunk ├──branches └──tags ├──iOS ├──trunk ├──branches └──tags └──ReactNative ├──trunk ├──branches └──tags
At this time, the code of the RN project, including files and files, are all in the trunk directory. Naturally, you need to open the terminal in the trunk directory, run the npm i command, and install React Native dependencies, and the node_modules folder will naturally be created in this folder.
2. Configure ReactNative dependencies in Android project
For the case of files in Android projects
First edit the file in the project directory.
allprojects {
repositories {
google()
jcenter()
//Add this repository maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/node_modules/react-native/android"
}
}
}
Then edit the file in the app directory and add React Native dependencies.
implementation ':react-native:0.50.3'
Notice:This version number needs to be consistent with the RN version number configured in the file.
The reason why you need to add maven configuration to the project's file is that the source jcenter() of the default dependency package of Android project does not contain the latest version of React Native (it only reaches 0.20.1).
ReactNative independent directory situation
There is no big difference from the first case, except that the maven repository path of RN is different. Because the positions of projects pulled through version control are different, in order to avoid developers' conflicts with file editing in the project directory, the following method is recommended:
//Load configurationProperties properties = new Properties()
InputStream inputStream = ('').newDataInputStream();
(inputStream)
allprojects {
repositories {
jcenter()
maven {
// All of React Native (JS, Android binaries) is installed from npm
url ('')
}
}
}
where the file does not need to submit version control, and add a property to it, the android project directory path with the property value RN, for example in my project
=/Users/littlebyte/svn/ReactNative/ReactNative/node_modules/react-native/android
3. Create an Activity or Fragment hosted by the RN view
Create an activity hosted by RN view
public class MyReactActivity extends ReactActivity {
@Override
protected String getMainComponentName() {
//This return value needs to be the same as the registered name in the entry file of the N program return "XXX";
}
}
Create a Fragment hosted by RN View
Unlike Activity, loading RNs in Fragment is a bit different. But loading RN in Android, whether in Activity or Fragment, is just a View. To set a View for Fragment, you only need the Fragment's onCreateView to return the RN View. The code is as follows:
public class MyFragment extends Fragment {
public static final String COMPONENT_NAME = "MyFragment";
private ReactRootView mReactRootView;
@Override
public void onAttach(Context context) {
(context);
mReactRootView = new ReactRootView(context);
(
getReactNativeHost().getReactInstanceManager(),
COMPONENT_NAME,
null);
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
(inflater, container, savedInstanceState);
return mReactRootView;
}
@Override
public void onDestroy() {
();
if (mReactRootView != null) {
();
mReactRootView = null;
}
if (getReactNativeHost().hasInstance()) {
getReactNativeHost().getReactInstanceManager().onHostDestroy(getActivity()
);
}
}
protected ReactNativeHost getReactNativeHost() {
return ((ReactApplication) getActivity().getApplication()).getReactNativeHost();
}
public ReactInstanceManager getReactInstanceManager() {
return getReactNativeHost().getReactInstanceManager();
}
}
Then use the Fragment as it should be used.
4. Modify Application
Modify the custom Application to implement the ReactApplication interface.
public class MainApplication extends Application implements ReactApplication {
public final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return ;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
}
5. Modify Application, add corresponding permissions and Activity statements
RN needs to add the following permissions:
<uses-permission android:name=""/> <uses-permission android:name=".SYSTEM_ALERT_WINDOW"/>
In addition to declaring a custom activity, you also need to add DevSettingsActivity to modify the RN related settings.
<activity android:name=""/>
At this point, the work of integrating RN in Android native projects has been basically completed.
6. Debugging
To debug the local server that needs to start the RN first. Open the terminal in the directory where the file is located, run the react-native start command to start the local server. Then install and run the App.
If you use the simulator to debug, you can directly run the page that opens the RN. If you use the real machine to debug, you need to shake and pop up the settings menu, click Dev Settings, set Debug server host&port for device, and fill in your computer's ip:8081.
After that, you can debug and run happily.
Summarize
The above is the entire content of this article. I hope that the content of this article has a certain reference value for everyone's study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.