react native之修改APP的名称和图标

一、修改APP名称

1、找到读取app_name的地方

进入:android/app/src/main/AndroidManifest.xml,
找到 android:label=”@string/app_name”。这个对应的就是APP的名称。

@string类似于定义好的变量,直接调取即可。

2、修改app的名称

进入:android/app/src/main/res/valuse/strings.xml目录下

修改即可:

<resources>

    <string name="app_name">你的APP名称</string>
</resources>

二、修改APP的图标

1、找到读取APP图标的地方

进入目录::android/app/src/main/AndroidManifest.xml

找到: android:icon=”@mipmap/ic_launcher”
这里的ic_launcher就是我的图标。这里也是从其他地方引用的,因此需要在被引用的地方修改。

2、修改图标
进入目录:android/app/src/main/res/mipmap–xxx,
(PS:这里需要注意,可能是mipmap,也可能是drawable),我这里是mipmap。这里只需要保持一致即可。

如果是:是mipmap,则android:icon=”@mipmap/ic_launcher”
如果是:是drawable,则android:icon=”@drawable/ic_launcher”。

我的目录结构:
这里写图片描述

这里面的图标大小都不一样,但是名字是一样的。图标分为
48x48,72x72,96x96,144x144.适配安卓不同机型

我们替换的话,只需要替换这四个文件夹里面的图片即可。

三、生成新的debug

1、进入android/app,删除掉build目录
2、在根目录,执行react-native run-and
3、把生成的debug版放到模拟器上,就能看到修改后的APP名字还有图标了。

React Native 提供了一种方便的方式来创建底部导航栏。你可以使用第三方库,比如 `react-navigation` 或 `react-native-navigation`,来实现底部导航。 下面是使用 `react-navigation` 库创建底部导航的简单示例: 1. 首先,确保你已经安装了 `react-navigation` 库: ``` npm install @react-navigation/native ``` 2. 创建一个底部导航的组件: ```jsx import React from 'react'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { NavigationContainer } from '@react-navigation/native'; import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'; import { faHome, faUser } from '@fortawesome/free-solid-svg-icons'; const Tab = createBottomTabNavigator(); const BottomTabNavigator = () => { return ( <NavigationContainer> <Tab.Navigator> <Tab.Screen name="Home" component={HomeScreen} options={{ tabBarIcon: ({ color, size }) => ( <FontAwesomeIcon icon={faHome} color={color} size={size} /> ), }} /> <Tab.Screen name="Profile" component={ProfileScreen} options={{ tabBarIcon: ({ color, size }) => ( <FontAwesomeIcon icon={faUser} color={color} size={size} /> ), }} /> </Tab.Navigator> </NavigationContainer> ); }; export default BottomTabNavigator; ``` 在上面的示例中,我们创建了一个包含两个屏幕(Home 和 Profile)的底部导航栏。我们使用了 `@fortawesome/react-native-fontawesome` 库来渲染图标,你也可以选择其他的图标库。 3. 创建 HomeScreen 和 ProfileScreen 组件,并实现它们的功能。 4. 在入口文件中使用底部导航组件: ```jsx import React from 'react'; import BottomTabNavigator from './BottomTabNavigator'; const App = () => { return <BottomTabNavigator />; }; export default App; ``` 这样,你就可以在 React Native 应用中使用底部导航栏了。当然,还有其他一些配置和功能可以使用,请参考 `react-navigation` 的文档以获取更多信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

铁柱同学

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值