pisar reactivo nativo en documental (2) -instalar componentes de terceros para el desarrollo

Debido a varios problemas con el uso de Expo, he dejado de usar Expo para el desarrollo. Todavía use el entorno completo de la banda sonora para el desarrollo.

---

Antes de desarrollar, hice una pequeña prueba para demostrar que HMR es eficaz.

La versión nativa de reacción que uso es 0.57

Abra my-app / App.js

Modificó el siguiente código

Después de guardar, la consola se compilará en un instante y el cliente se actualizará automáticamente después de aproximadamente 1 segundo. Parece que HMR es un buen lugar ~

Antes de continuar escribiendo, volví a sentir curiosidad por los estilos constantes. He escrito algunas reacciones antes, pero nunca he visto este tipo de escritura. Adivina qué, probablemente esté relacionado con el estilo. Déjame modificarlo primero

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',
  },
});

Jaja, se puso rojo. Un poco de miedo. Ok, solo sé para qué sirve.

El siguiente paso es instalar componentes de terceros. Siempre me han gustado los controles ant.design . Simplemente no he tenido la oportunidad de pelear, pero esta vez lo intenté.

Use ctrl + c para detener el proyecto en la consola, ingréselo en la consola, no es necesario instalarlo para los estudiantes que instalaron cnpm, ahora npm es muy lento.
 

cnpm install antd-mobile-rn --save

Inicie el proyecto y abra el cliente móvil.

Agregue a la cabeza de App.js de acuerdo con el tutorial del sitio web oficial de ant.desgin

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

Se produjo un error tan pronto como se guardó, OMG.

No se puede resolver "antd-mobile-rn / lib / button" desde "App.js"

Qué pasa, sí. Soy una persona perezosa y tengo problemas directos con Baidu. Bueno, no hay el mismo caso. Resuélvelo usted mismo, los controles normales son normales. Parece que el problema radica en los controles introducidos. Eche un vistazo en node_modules y encuentre un pequeño ícono de un acceso directo en la carpeta de ant-mobile-rn. La búsqueda en Internet resultó ser un enlace suave (utilicé el sistema win10). Es demasiado alto, no se puede ver en las propiedades de la carpeta, es solo una carpeta normal. Encontré cnpm nuevamente. Resultó que cnpm usaba enlaces blandos para ahorrar espacio.

Después de buscar en línea, no se puede usar cnpm, de lo contrario habrá varios problemas de no encontrar el módulo, o usar hpm honestamente, aquí primero debe instalar un espejo Taobao de cliente GIT

Si desea utilizar la fuente de Taobao, consulte este artículo

antd soporta carga bajo demanda, ejecute primero

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

Entonces plugins: [[ "importación", { "libraryname": "ANTD-mobile-rn"}]], se añadió babel.config.js en la línea

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

Después de reiniciar, agregue el encabezado App.js

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

Si comete un error, está bien. Voy a hacer un centro comercial simple, primero baje primero y obtenga el TabBar inferior.

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>
    );
  }
}

Pantalla del teléfono después de la compilación

Parece una barra inferior

 

 

Como resultado, se coloca el mismo código debajo del iPhone y se informa el marco rojo. La razón es que no hay ningún valor en TabBar.Item. Parece que los dos conjuntos de intérpretes todavía no son lo mismo.

Además, en el iPhone, parece que no es compatible con archivos de imagen en formato webp. Aquí hay una solución . Todavía no lo he probado. Primero usemos jpg.

De repente descubrí que hay un problema con la adaptación de la pantalla. El ancho de cada pantalla es diferente. Para hacer la adaptación, la solución es la siguiente:

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

Para continuar