react-native初体验

作为一个开发人员还是要明白一切以官网为主：www.reactnative.cn/

一、开发环境搭建

www.reactnative.cn/docs/enviro…

说说运行项目遇到的一些坑：1.运行前确定react-native、react-native-cli是否全局安装。2.对于运行项目后的 cli.init is not a function这种错误是因为react-native版本的问题。可以采用npx react-native init AwesomeProject --version X.XX.X，降低版本的方法解决。

二、运行项目

根据开发环境运行yarn ios 或者yarn android，当出来这个画面后，即启动成功。

三、安装一些第三方的包

• 安装 @ant-design/react-native 和 @ant-design/icons-react-native rn.mobile.ant.design/docs/react/… 安装完后一定要运行react-native link @ant-design/icons-react-native，这句代码。
• 安装babel-plugin-import

四、对代码做简单的更改

在项目根目录下新建src文件夹->新建index.js文件

import React, { useState } from 'react';
import { Text } from 'react-native';
import { Icon, TabBar } from '@ant-design/react-native';

const Index = () => {
  const [selectedTab, setSelectTab] = useState('redTab');
  const onChangeTab = type => {
    return () => {
      setSelectTab(type);
    };
  };
  return (
    <TabBar
      unselectedTintColor="#949494"
      tintColor="#33A3F4"
      barTintColor="#f5f5f5">
      <TabBar.Item
        title="Life"
        icon={<Icon name="home" />}
        selected={selectedTab === 'blueTab'}
        onPress={onChangeTab('blueTab')}>
        <Text>111</Text>
      </TabBar.Item>
      <TabBar.Item
        icon={<Icon name="ordered-list" />}
        title="Koubei"
        badge={2}
        selected={selectedTab === 'redTab'}
        onPress={onChangeTab('redTab')}>
        <Text>222</Text>
      </TabBar.Item>
      <TabBar.Item
        icon={<Icon name="like" />}
        title="Friend"
        selected={selectedTab === 'greenTab'}
        onPress={onChangeTab('greenTab')}>
        <Text>14441</Text>
      </TabBar.Item>
      <TabBar.Item
        icon={<Icon name="user" />}
        title="My"
        selected={selectedTab === 'yellowTab'}
        onPress={onChangeTab('yellowTab')}>
        <Text>77777</Text>
      </TabBar.Item>
    </TabBar>
  );
};

export default Index;

修改App.js

import React from 'react';
import Index from './src/index';

const App = () => {
  return <Index />;
};

export default App;

运行项目后 就会这样啦

前端小白感谢关注😄