react-native stepping on documentary (2)-install third-party components for development

Because of various problems with using Expo, I have given up using Expo for development. Still use the complete soundtrack environment for development.

---

Before developing, I made a small test to prove that HMR is effective.

The react native version I use is 0.57

Open my-app / App.js

Modified the following code

After saving, the console will compile in an instant, and the client will automatically refresh after about 1 second. It seems that HMR is a good place ~

Before continuing to write, I became curious about const styles again. I have written some reactjs before, but I have never seen this kind of writing. Guess what, it is probably related to style. Let me modify it first

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>//对应下边的styles里的container样式
        <Text>This is the frist app with expo!</Text>
        <Image
          style={{width:44, height: 33}}
          source={{uri:'https://res.smzdm.com/images/emotions/68.png'}}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F00',//改了一下，原来是#FFF
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Haha, it turned red. A little bit scary. Ok, just know what it is for.

The next step is to install third-party components. I have always liked the ant.design controls. I just haven't had a chance to actually fight. This time I just tried it.

Use ctrl + c to stop the project in the console, enter it in the console, no need to install it for students who installed cnpm, now npm is so slow.
 

cnpm install antd-mobile-rn --save

Start the project and open the mobile client.

Add to the head of App.js according to the official website tutorial of ant.desgin

import Button from 'antd-mobile-rn/lib/button';

An error occurred as soon as it was saved, OMG.

Unable to resolve "antd-mobile-rn/lib/button" from "App.js"

What's wrong, yes. I am a lazy person and have direct problems with Baidu. Well, there is no same case. Solve it yourself, ordinary controls are normal. It seems that the problem lies in the introduced controls. Take a look in node_modules and find a small icon of a shortcut on the folder of ant-mobile-rn. Internet search turned out to be a soft link (I used win10 system). It's too high-end, it can't be seen in the folder properties, it is just a normal folder. I found cnpm again. It turned out that cnpm used soft links to save space.

After searching online, cnpm cannot be used, otherwise there will be various problems of not finding the module, or use npm honestly, here you must first install a GIT client Taobao mirror

If you want to use Taobao source, please refer to this article

antd supports loading on demand, execute first

cnpm install babel-plugin-import --save-dev

Then plugins: [[ "import", { "libraryName": "antd-mobile-rn"}]], was added babel.config.js on the line

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [["import", { "libraryName": "antd-mobile-rn" }]],
  };
};

After restarting, add in App.js header

import { TabBar } from 'antd-mobile-rn';

If you make a mistake, it ’s okay. I'm going to make a simple mall, first come down first and get the bottom TabBar.

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { TabBar } from 'antd-mobile-rn';

export default class App extends React.Component {
  render() {
    return (
        <TabBar unselectedTintColor="#949494" tintColor="#33A3F4" barTintColor="#ccc" >
          <TabBar.Item title="Index" ></TabBar.Item>
          <TabBar.Item title="My"></TabBar.Item>
        </TabBar>
    );
  }
}

Phone display after compilation

It looks like a bottom bar

 

 

As a result, the same code is placed under the iPhone, and the red frame is reported. The reason is that there is no value in TabBar.Item. It seems that the two sets of interpreters are still not the same.

In addition, on the iPhone, it seems that it does not support webp format image files. Here is a solution . I haven't tried it yet. Let's make use of jpg.

Suddenly found that there is a problem with the screen adaptation. The width of each screen is different. To do the adaptation, the solution is as follows:

https://blog.csdn.net/sinat_17775997/article/details/53728454

to be continued