闲话少说，继承自上一次的经验，我们再度出发QAQ

如果想要使用Icon，可以使用expo的**@expo/vector-icons，在官方文档里搜索一下就可以看到简单的用法了。还有它的Icon**库。

因为想着说不定可以像阿B一样卖个性装扮，所以尝试了一下实现这个功能，以下是AI总结

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
import React from 'react';
import { Tabs } from 'expo-router';
import { ImageBackground, StyleSheet } from 'react-native';

export default function MyTabs() {
  return (
    <Tabs
      screenOptions={{
        tabBarStyle: {
          // 设置背景颜色（可以选择图片或颜色）
          backgroundColor: 'transparent', // 透明背景以便背景图片可以显示
        },
        tabBarBackground: () => (
          <ImageBackground
            source={require('./assets/tab-background.jpg')}  // 你的背景图片
            style={styles.backgroundImage}
          />
        ),
      }}
    >
      {/* 你的 Tab 屏幕组件 */}
    </Tabs>
  );
}

const styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    width: '100%',
    height: '100%',
  },
});

需要进行测试的话，github上有人收集整理了全部的个性装扮，可以很简单的下载出来进行测试。

然后进行了一下如何把Icon也替换掉的尝试，改进后的如下

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
<Tabs 
        screenOptions={({ route }) => ({
          tabBarStyle: {
            backgroundColor: 'transparent',
            height: 60,
          },
          tabBarBackground: () => (
            <ImageBackground
              source={require('../../assets/images/personal/tail_bg.png')}
              style={styles.backgroundImage}
            />
          ),
          tabBarLabel: (props) => (
            <Text className="text-white text-xs font-bold mt-2">
              {props.children}
            </Text>
          ),
          tabBarIcon: ({ focused, color, size}) => {
            const iconStyle = {
              ...styles.icon,
              width: size * 1.5,
              height: size * 1.5,
            };
            if(route.name === 'homepage') {
              return (
                <Image 
                  source={
                    focused
                    ? require('../../assets/images/personal/tail_icon_selected_main.png') 
                    : require('../../assets/images/personal/tail_icon_main.png')
                  }
                  style={iconStyle}
                />
              )
            } else if(route.name === 'personal') {
              return (
                <Image
                  source={
                    focused
                    ? require('../../assets/images/personal/tail_icon_selected_myself.png')
                    : require('../../assets/images/personal/tail_icon_myself.png')
                  }
                  style={iconStyle}
                />
              )
            }
          },
        })}
      >
    
  const styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    width: '100%',
    height: '100%',
  },
  icon: {
    width: '100%',
    height: '100%',
    resizeMode: 'cover',
  },
});

简单来说我使用Image替换掉了Icon，然后进行了一些属性调整。暂时看起来没什么问题，之后的话可能就需要从服务器那边申请对应的图片资源然后进行配置了。（还得登录注册身份验证….想想都可怕）