項(xiàng)目工程是仿照喜馬拉雅搭建
需要底部tab(5個(gè))
- 首頁(yè)
- 我聽(tīng)
- 播放
- 發(fā)現(xiàn)
- 賬戶(hù)
涉及導(dǎo)航器的使用
導(dǎo)航器分
1.堆棧式導(dǎo)航器
2.標(biāo)簽導(dǎo)航器
導(dǎo)航器的安裝
yarn add @react-navigation/native
安裝 react-navigation 相關(guān)依賴(lài)庫(kù)
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
- 動(dòng)畫(huà)庫(kù)
- react-native-gesture-handler
- 手勢(shì)庫(kù)
- react-native-screens
- 提高性能
- react-native-safe-area-context
- 全面屏安全區(qū)庫(kù)
- @react-native-community/masked-view
- 堆棧式導(dǎo)航器 依賴(lài)的庫(kù)
在index.js 文件種導(dǎo)入依賴(lài)
import 'react-native-gesture-handler';
堆棧式導(dǎo)航器
- 安裝
yarn add @react-navigation/stack
實(shí)例：完成首頁(yè)往詳情頁(yè)的跳轉(zhuǎn)
新增兩個(gè)頁(yè)面
- 首頁(yè)
interface IProps {
navigation: RootStackNavigation;
}
/**
* 首頁(yè)類(lèi)
*/
class HomeStack extends React.Component<IProps> {
onPress = () => {
const {navigation} = this.props;
navigation.navigate("Detail", {id: 100});
}
render(){
return (
<View>
<Text>Home</Text>
<Button title="跳轉(zhuǎn)到詳情頁(yè)" onPress={this.onPress}></Button>
</View>
);
}
}
// 導(dǎo)出首頁(yè)類(lèi)
export default HomeStack;
- 詳情頁(yè)
interface IProps {
route: RouteProp<RootStackParamList, 'Detail'>;
}
/**
* 詳情頁(yè)面
*/
class DetailStack extends React.Component<IProps> {
render(){
const {route} = this.props;
return(
<View>
<Text>Details</Text>
{/* 獲取導(dǎo)航器跳轉(zhuǎn)傳參的值 */}
<Text>{route.params.id}</Text>
</View>
);
}
}
// 導(dǎo)出詳情頁(yè)面類(lèi)
export default DetailStack;
- 實(shí)現(xiàn)堆棧式導(dǎo)航欄界面
export type RootStackParamList = {
Home: undefined;
Detail: {
id: number;
};
}
// 定義類(lèi)型別名
export type RootStackNavigation = StackNavigationProp<RootStackParamList>;
// 創(chuàng)建堆棧 導(dǎo)航容器
let Stack = createStackNavigator<RootStackParamList>();
class NavigatorStack extends React.Component {
render() {
return (
<NavigationContainer>
{/* 堆棧導(dǎo)航器 */}
<Stack.Navigator
screenOptions={{ headerTitleAlign: 'center',
//左滑手勢(shì)(Android設(shè)置)
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: '首頁(yè)' }} name='Home' component={HomeStack} />
<Stack.Screen options={{ headerTitle: '詳情頁(yè)' }} name='Detail' component={DetailStack} />
</Stack.Navigator>
</NavigationContainer>
);
}
}
// 導(dǎo)出 navigator
export default NavigatorStack;
1.gif
ps: 待完善，一步一個(gè)??阁危，up~
標(biāo)簽導(dǎo)航器
- 安裝
yarn add @react-navigation/bottom-tabs
- 添加幾個(gè)tab類(lèi)頁(yè)面(Home芭商，Listen份招，F(xiàn)ound，Me)
interface IProps {
navigation: RootStackNavigation;
}
/**
* 首頁(yè)類(lèi)
*/
class Home extends React.Component<IProps> {
onPress = () => {
const {navigation} = this.props;
navigation.navigate("Detail", {id: 100});
}
render(){
return (
<View>
<Text>Home</Text>
<Button title="跳轉(zhuǎn)到詳情頁(yè)" onPress={this.onPress}></Button>
</View>
);
}
}
// 導(dǎo)出首頁(yè)類(lèi)
export default Home;
- 添加BottomTabs 組件
export type BottomTabParamList = {
Home: undefined;
Listen: undefined;
Found: undefined;
Me: undefined;
}
type IProps = StackScreenProps<ParamListBase, string>;
// 底部Tab導(dǎo)航器組件
const Tab = createBottomTabNavigator<BottomTabParamList>();
function getHeaderTitle(route: any) {
//使用route.state的時(shí)候：官方提示用getFocusedRouteNameFromRoute
const routeName = getFocusedRouteNameFromRoute(route) ?? 'HomeTabs';
switch (routeName) {
case 'HomeTabs':
return '首頁(yè)';
case 'Listen':
return '我聽(tīng)';
case 'Found':
return '發(fā)現(xiàn)';
case 'Me':
return '我的';
default:
return '首頁(yè)';
}
}
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',
// 隱藏導(dǎo)航欄
headerShown: false,
}}>
<Tab.Screen name="Home" component={Home} options={{tabBarLabel:'首頁(yè)'}}/>
<Tab.Screen name="Listen" component={Listen} options={{tabBarLabel:'我聽(tīng)'}}/>
<Tab.Screen name="Found" component={Found} options={{tabBarLabel:'發(fā)現(xiàn)'}}/>
<Tab.Screen name="Me" component={Account} options={{tabBarLabel:'賬戶(hù)'}}/>
</Tab.Navigator>
);
}
}
//導(dǎo)出 底部tab組件
export default BottomTabs;
- 再外面嵌套堆棧導(dǎo)航器致份，這樣 可以將詳情頁(yè)放到堆棧導(dǎo)航組件種，標(biāo)簽導(dǎo)航器也可以完成詳情頁(yè)的跳轉(zhuǎn)
將前面堆棧式導(dǎo)航器里面的HomeStack頁(yè)面容器，切換成BottomTabs標(biāo)簽導(dǎo)航器
{/* <Stack.Screen options={{ headerTitle: '首頁(yè)' }} name='Home' component={HomeStack} /> */}
<Stack.Screen name='BottomTabs' component={BottomTabs} />
image.png
項(xiàng)目基礎(chǔ)框架搭建完成曙求！
ps: 待完善，一步一個(gè)??????映企，up~
