创建react native项目的笔记

本项目适用于react native@0.72 react@18.2

重新下载 ruby

1.ruby环境必须是2.6.10版本以上(查看ruby版本 ruby -v)

brew reinstall ruby

2.进入vim编辑器
vim ~/.zshrc

3.配置
export PATH="/usr/local/opt/ruby/bin:$PATH"
export LDFLAGS="-L/usr/local/opt/ruby/lib"
export CPPFLAGS="-I/usr/local/opt/ruby/include"
export PKG_CONFIG_PATH="/usr/local/opt/ruby/lib/pkgconfig"

4.重新执行一下文件
source ~/.zshrc
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

安装 watchman

brew install watchman
1

安装 cocoapods

sudo gem install cocoapods
pod setup
1
2

安装 react native 项目

npx react-native@latest init <项目名称>

npx react-native run-ios
npx react-native run-android
1
2
3
4

创建好项目后安装 ios 依赖

1.第一步
进入ios文件夹
cd ios

2.第二步
bundle install

3.第三步
bundle exec pod install

运行项目打包ios
1
2
3
4
5
6
7
8
9
10
11

清除设备缓存

1.android
npx react-native start --reset-cache

2.ios
npx react-native start --reset-cache --reset-cache

清理构建缓存
rm -rf node_modules rm -f package-lock.json rm -f yarn.lock npm cache clean --force npm install

 cd ios
   rm -rf Pods
   rm -rf ~/Library/Developer/Xcode/DerivedData/*
   pod install
1
2
3
4
5
6
7
8
9
10
11
12
13

安装 android 依赖

cd android
./gradlew clean
cd ..
npx react-native run-android

生成发行 APK 包
./gradlew assembleRelease

1
2
3
4
5
6
7
8

链接 网易 mumu 模拟器

1.windows
adb connect 127.0.0.1:7555

2.mac
adb connect 127.0.0.1:5555
1
2
3
4
5

安装路由 Navigation

1.第一步
npm install @react-navigation/native

2.第二步
npm install react-native-screens react-native-safe-area-context

react-native-safe-area-context：提供了处理安全区域（Safe Area）的能力。安全区域是指屏幕上不受刘海屏、圆角等系统元素遮挡的区域

在App.jsx文件中引入
（NavigationContainer是一个组件，用于管理我们的导航树并包含导航状态。
这个组件必须包裹所有的导航器结构。通常，我们会在应用程序的根部渲染这个组件，这通常是从App.js导出的组件）
import {NavigationContainer} from '@react-navigation/native';
import {SafeAreaProvider} from 'react-native-safe-area-context';

安装的库是导航器的构建块和共享基础

3.第三步
npm install @react-navigation/native-stack

@react-navigation/native-stack依赖于react-native-screens和上面安装的其他库

在App.jsx文件中引入
import { createNativeStackNavigator } from '@react-navigation/native-stack';

4.安装底部tab切换
npm install @react-navigation/bottom-tabs

Tab.Navigator组件的screenOptions属性用于设置所有Tab.Screen组件的默认选项和样式。下面是一些常用的样式选项：
- tabBarStyle：设置标签栏的样式，可以包括backgroundColor、height、borderTopWidth等。
- tabBarActiveTintColor：设置活动标签的文本颜色。
- tabBarInactiveTintColor：设置非活动标签的文本颜色。
- tabBarLabelStyle：设置标签的文本样式，可以包括fontFamily、fontSize、fontWeight等。
- tabBarIconStyle：设置标签图标的样式，可以包括width、height、tintColor等。
- tabBarIndicatorStyle：设置标签栏指示器的样式，可以包括backgroundColor、height等。
- tabBarPressColor：设置标签栏被按下时的颜色。
- tabBarPressOpacity：设置标签栏被按下时的不透明度。

Tab.Screen组件的options属性用于设置选项，可以通过它来自定义标签页的外观和行为。下面是一些常用的设置项：
- tabBarLabel：标签页的显示文本。
- tabBarIcon：标签页的图标，可以使用图标组件或自定义图标。
- tabBarVisible：设置标签页是否可见。
- tabBarAccessibilityLabel：设置标签页的辅助功能标签。
- tabBarTestID：设置标签页的测试ID，用于测试目的。
- tabBarBadge：设置标签页的徽章，显示在图标上，并可以用于显示未读消息数等。
- tabBarBadgeStyle：设置标签页徽章的样式。
- tabBarButtonComponent：自定义标签页的按钮组件。
- tabBarOnPress：点击标签页时触发的回调函数。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

router.js

TabNavigator.js

import React from 'react';
import {Image, Platform, StyleSheet} from 'react-native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {getFocusedRouteNameFromRoute} from '@react-navigation/native';

const Tab = createBottomTabNavigator();
import {pxToPd} from '../common/js/device';

import Home from '../views/home';
import Match from '../views/match';
import Shop from '../views/shop';
import Mine from '../views/mine';
/**
 * name:路由名称
 * title:页面标题
 * headerShown: 是否显示标题,
 * component:页面对应组件
 * **/
const tabRouter = [
  {
    name: 'Home',
    options: {
      title: '首页',
      headerShown: false,
    },
    component: Home,
    icon: require('../common/images/tabList/home.png'),
    selectIcon: require('../common/images/tabList/home_select.png'),
  },
  {
    name: 'Match',
    options: {
      title: '赛事',
      headerShown: false,
    },
    component: Match,
    icon: require('../common/images/tabList/match.png'),
    selectIcon: require('../common/images/tabList/match_select.png'),
  },
  {
    name: 'Shop',
    options: {
      title: '店铺',
      headerShown: false,
    },
    component: Shop,
    icon: require('../common/images/tabList/shop.png'),
    selectIcon: require('../common/images/tabList/shop_select.png'),
  },
  {
    name: 'Mine',
    options: {
      title: '我的',
      headerShown: false,
    },
    component: Mine,
    icon: require('../common/images/tabList/mine.png'),
    selectIcon: require('../common/images/tabList/mine_select.png'),
  },
];

const TabNavigator = () => {
  //从子导航器获取路由名称
  const getChildrenTitle = route => {
    const routeName = getFocusedRouteNameFromRoute(route);
    return routeName;
  };
  return (
    <Tab.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: '#fff', //设置头部背景颜色
        },
        headerTintColor: '#333', //设置当前模块下头部字体以及返回按钮的颜色
        headerTitleAlign: 'center', //设置当前模块下头部标题居中显示
        headerTitleStyle: {
          fontSize: pxToPd(38), //设置当前模块下头部字体大小
        },
        tabBarActiveTintColor: '#ffa157', //当前选中的颜色
        tabBarInactiveTintColor: '#ccc', //不是当前状态的颜色
        tabBarLabelStyle: {
          fontSize: pxToPd(24), //设置底部tab字体大小
          marginBottom: 0, // 控制标签与图标容器的间距
        },
        tabBarIconStyle: {
          marginBottom: -5, // 控制图标与标签容器的间距
        },
        tabBarStyle: {
          backgroundColor: '#fff', //设置底部tab的背景颜色
          borderTopColor: 'rgba(0, 0, 0, 0.04)', //设置底部tab上边框的颜色
        },
      }}>
      {tabRouter.map((item, index) => (
        <Tab.Screen
          key={index}
          name={item.name}
          component={item.component}
          options={({route}) => ({
            tabBarIcon: ({focused}) => (
              <Image
                source={focused ? item.selectIcon : item.icon}
                style={[styles.image]}
              />
            ),
            title: getChildrenTitle(route) || item.options.title,
            headerShown: item.options.headerShown,
          })}
        />
      ))}
    </Tab.Navigator>
  );
};

const styles = StyleSheet.create({
  image: {
    width: pxToPd(48),
    height: pxToPd(48),
  },
});

export default TabNavigator;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

StackNavigator.js

import React from 'react';
import {getFocusedRouteNameFromRoute} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();
import {pxToPd} from '../common/js/device';

import router from './index';

const StackNavigator = () => {
  //从子导航器获取路由名称
  const getChildrenTitle = route => {
    const routeName = getFocusedRouteNameFromRoute(route);
    return routeName;
  };
  return (
    <>
      <Stack.Navigator
        screenOptions={{
          headerStyle: {
            backgroundColor: '#fff', //设置头部背景颜色
          },
          headerTintColor: '#333', //设置头部标题颜色
          headerTitleAlign: 'center', //设置头部标题居中
          headerTitleStyle: {
            fontSize: pxToPd(36), //设置头部标题字体大小
          },
        }}>
        {router.map((item, index) => (
          <Stack.Screen
            key={index}
            name={item.name}
            component={item.component}
            options={({route}) => ({
              title: getChildrenTitle(route) || item.options.title,
              headerShown: item.options.headerShown,
            })}
          />
        ))}
      </Stack.Navigator>
    </>
  );
};
export default StackNavigator;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

index.js

import TabNavigator from './TabNavigator';

//测试页面
import TestExampleTab from '../views/testExampleTab';
import TestExample from '../views/testExample';
import TestWebView from '../views/testWebView';
import TestDynamicButtons from '../views/testDynamicButtons';
import TestShowCard from '../views/testShowCard';
import TestDragCard from '../views/testDragCard';
import TestScrollViewDrag from '../views/testScrollViewDrag';
/**
 * name:路由名称
 * title:页面标题
 * headerShown: 是否显示标题,
 * component:页面对应组件
 * **/
const router = [
  {
    name: 'Index',
    options: {
      title: '映蝶',
      headerShown: false,
    },
    component: TabNavigator,
  },
  // 测试功能
  {
    name: 'TestExampleTab',
    options: {
      title: '测试页面',
      headerShown: true,
    },
    component: TestExampleTab,
  },
  {
    name: 'TestExample',
    options: {
      title: '测试页面',
      headerShown: true,
    },
    component: TestExample,
  },
  {
    name: 'TestWebView',
    options: {
      title: '测试页面',
      headerShown: true,
    },
    component: TestWebView,
  },
  {
    name: 'TestDynamicButtons',
    options: {
      title: '测试页面',
      headerShown: true,
    },
    component: TestDynamicButtons,
  },
  {
    name: 'TestShowCard',
    options: {
      title: '测试页面',
      headerShown: true,
    },
    component: TestShowCard,
  },
  {
    name: 'TestDragCard',
    options: {
      title: '测试页面',
      headerShown: true,
    },
    component: TestDragCard,
  },
  {
    name: 'TestScrollViewDrag',
    options: {
      title: '测试页面',
      headerShown: true,
    },
    component: TestScrollViewDrag,
  },
];
export default router;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

页面之间的跳转逻辑

navigation.popToTop();//返回顶部页面

navigation.goBack(2,{

}); // 返回到第二个页面

navigation.navigate('Fourth',{

});//跳转到对应页面

navigation.replace('Mine')

import {useNavigation} from '@react-navigation/native';
const navigation = useNavigation();
navigation.navigate('List');

import { useRoute } from '@react-navigation/native';
const route = useRoute();
route.params
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

添加
npm install react-native-gesture-handler

自定义头部样式

1.headerStyle：
 一个应用于包裹标题的View的样式对象。如果在上面设置了backgroundColor，那么标题的颜色将为该颜色

- backgroundColor：标题栏的背景颜色。
- borderBottomColor：标题栏底部边框的颜色。
- borderBottomWidth：标题栏底部边框的宽度。
- height：标题栏的高度。


2.headerTintColor：
返回按钮和标题都使用此属性作为它们的颜色。在下面的示例中，我们将tintColor设置为白色（#fff），以使返回按钮和标题为白色。

- 颜色名称：您可以使用预定义的颜色名称，如"red"、"blue"、"green"等。
- 十六进制值：您可以使用十六进制颜色代码，如"#FF0000"代表红色。
- RGB值：您可以使用RGB值来指定颜色，如"rgb(255, 0, 0)"代表红色。

3.headerTitleStyle属性用于自定义标题的样式，可以设置以下样式属性：

- fontFamily：标题的字体族名称（如"Arial"、"Helvetica"等）。
- fontWeight：标题的字重（如"bold"、"normal"等）。
- fontSize：标题的字号大小。
- color：标题的颜色。
- textAlign：标题的对齐方式（如"left"、"center"、"right"等）。
- textTransform：标题的文本转换方式（如"uppercase"、"lowercase"等）。
- letterSpacing：标题的字间距。
- lineHeight：标题的行高。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

判断不同设备平台代码示例

const refreshControl = Platform.select({
    ios: <RefreshControlIOS
           refreshing={refreshing}
           onRefresh={handleRefresh}
         />,
    android: <RefreshControl
                refreshing={refreshing}
                onRefresh={handleRefresh}
              />
});
1
2
3
4
5
6
7
8
9
10

安装 Axios

npm install axios
1

安装本地简单存储工具

1.第一步
npm install @react-native-async-storage/async-storage

2.第二步
导入库并使用AsyncStorage
import AsyncStorage from "@react-native-async-storage/async-storage";

// token模块
const TokenKey = 'windoentToken';
//存储数据
export const setToken = async value => {
  await AsyncStorage.setItem(TokenKey, value);
};

//获取数据
export const getToken = async () => {
  try {
    const value = await AsyncStorage.getItem(TokenKey);
    return value;
  } catch (error) {
    return null;
  }
};

//删除数据
export const removeToken = async () => {
  await AsyncStorage.removeItem(TokenKey);
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

安装轮播图

npm install react-native-swiper
1

安装 Toast 消息弹出框

1.安装
npm install --save react-native-toast-message

2.在App.jsx中注册全局
// App.jsx
import Toast from 'react-native-toast-message';

export function App(props) {
  return (
    <>
      {/* ... */}
      <Toast />
    </>
  );
}

3.组件中使用
import Toast from 'react-native-toast-message';
Toast.show({
  type: 'success',//`success`、`error`、`info`
  text1: 'Hello',
  text2: 'This is some something 
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/543846