项目工程是仿照喜马拉雅搭建

需要底部tab(5个)

• 首页
• 我听
• 播放
• 发现
• 账户

涉及导航器的使用
导航器分
1.堆栈式导航器
2.标签导航器

导航器的安装

yarn add @react-navigation/native

安装 react-navigation 相关依赖库

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

• react-native-reanimated
  • 动画库
• react-native-gesture-handler
  • 手势库
• react-native-screens
  • 提高性能
• react-native-safe-area-context
  • 全面屏安全区库
• @react-native-community/masked-view
  • 堆栈式导航器 依赖的库

在index.js 文件种导入依赖

import 'react-native-gesture-handler';

堆栈式导航器

• 安装

yarn add @react-navigation/stack

实例：完成首页往详情页的跳转

新增两个页面

• 首页

interface IProps {
    navigation: RootStackNavigation;
}
/**
 * 首页类
 */
class HomeStack extends React.Component<IProps> {
    onPress = () => {
        const {navigation} = this.props;
        navigation.navigate("Detail", {id: 100});
    }
    render(){
        return (
            <View>
                <Text>Home</Text>
                <Button title="跳转到详情页" onPress={this.onPress}></Button>
            </View>
        );
    }
}
// 导出首页类
export default HomeStack;

• 详情页

interface IProps {
    route: RouteProp<RootStackParamList, 'Detail'>;
}
/**
 * 详情页面
 */
class DetailStack extends React.Component<IProps> {
    render(){
        const {route} = this.props;
        return(
            <View>
                <Text>Details</Text>
                {/* 获取导航器跳转传参的值 */}
                <Text>{route.params.id}</Text>
            </View>
        );
    }
}
// 导出详情页面类
export default DetailStack;

• 实现堆栈式导航栏界面

export type RootStackParamList = {
    Home: undefined;
    Detail: {
        id: number;
    };
}

// 定义类型别名
export type RootStackNavigation = StackNavigationProp<RootStackParamList>;

// 创建堆栈 导航容器
let Stack = createStackNavigator<RootStackParamList>();
class NavigatorStack extends React.Component {
    render() {
        return (
            <NavigationContainer>
                {/* 堆栈导航器 */}
                <Stack.Navigator
                    screenOptions={{ headerTitleAlign: 'center', 
                    //左滑手势(Android设置)
                    gestureEnabled: true, 
                    headerStyleInterpolator: HeaderStyleInterpolators.forUIKit, 
                    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
                    gestureDirection: 'horizontal',
                    headerStyle: {
                        ...Platform.select({
                            android: {
                                elevation: 0,
                                borderBottomWidth: StyleSheet.hairlineWidth,
                                headerStatusBarHeight: StatusBar.currentHeight,
                            },
                        }),
                    },
                }}
                >
                    <Stack.Screen options={{ headerTitle: '首页' }} name='Home' component={HomeStack} />
                    <Stack.Screen options={{ headerTitle: '详情页' }} name='Detail' component={DetailStack} />
                </Stack.Navigator>
            </NavigationContainer>
        );
    }
}
// 导出 navigator
export default NavigatorStack;

1.gif

ps: 待完善，一步一个👣，up~

标签导航器

• 安装

yarn add @react-navigation/bottom-tabs

• 添加几个tab类页面(Home，Listen，Found，Me)

interface IProps {
    navigation: RootStackNavigation;
}
/**
 * 首页类
 */
class Home extends React.Component<IProps> {
    onPress = () => {
        const {navigation} = this.props;
        navigation.navigate("Detail", {id: 100});
    }
    render(){
        return (
            <View>
                <Text>Home</Text>
                <Button title="跳转到详情页" onPress={this.onPress}></Button>

            </View>
        );
    }
}
// 导出首页类
export default Home;

• 添加BottomTabs 组件

export type BottomTabParamList = {
    Home: undefined;
    Listen: undefined;
    Found: undefined;
    Me: undefined;
}

type IProps = StackScreenProps<ParamListBase, string>;
// 底部Tab导航器组件
const Tab = createBottomTabNavigator<BottomTabParamList>();

function getHeaderTitle(route: any) {
    //使用route.state的时候：官方提示用getFocusedRouteNameFromRoute
    const routeName = getFocusedRouteNameFromRoute(route) ?? 'HomeTabs';
    switch (routeName) {
        case 'HomeTabs':
            return '首页';
        case 'Listen':
            return '我听';
        case 'Found':
            return '发现';
        case 'Me':
            return '我的';
        default:
            return '首页';
    }
}

class BottomTabs extends React.Component<IProps> {
    componentDidUpdate() {
        const { navigation, route } = this.props;
        navigation.setOptions({
            headerTitle: getHeaderTitle(route),
        });
    }
    render() {
        return (
            // {/* 'tabBarOptions' is deprecated. Migrate the options to 'screenOptions' instead. */}
            <Tab.Navigator screenOptions={{
                tabBarActiveTintColor: '#ff5500',
                // 隐藏导航栏
                headerShown: false,
            }}>
                <Tab.Screen name="Home" component={Home} options={{tabBarLabel:'首页'}}/>
                <Tab.Screen name="Listen" component={Listen} options={{tabBarLabel:'我听'}}/>
                <Tab.Screen name="Found" component={Found} options={{tabBarLabel:'发现'}}/>
                <Tab.Screen name="Me" component={Account} options={{tabBarLabel:'账户'}}/>
            </Tab.Navigator>
        );
    }
}
//导出 底部tab组件
export default BottomTabs;

• 再外面嵌套堆栈导航器，这样 可以将详情页放到堆栈导航组件种，标签导航器也可以完成详情页的跳转
  将前面堆栈式导航器里面的HomeStack页面容器，切换成BottomTabs标签导航器

 {/* <Stack.Screen options={{ headerTitle: '首页' }} name='Home' component={HomeStack} /> */}
<Stack.Screen name='BottomTabs' component={BottomTabs} />

image.png

项目基础框架搭建完成！
ps: 待完善，一步一个👣👣👣，up~