安装
npm install @react-navigation/native
npm install @react-navigation/stack
npm install @react-navigation/bottom-tabs
npm install @react-navigation/material-top-tabs react-native-tab-view
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
配置
把下面两行代码添加到react项目的android/app/build.gradle中的dependencies部分
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
堆栈导航
- NavigationContainer 路由容器
- createStackNavigator 创建堆栈导航方法
导入组件:
import { NavigationContainer } from '@react-navigation/native';
// 导入导航容器
import { createStackNavigator } from '@react-navigation/stack';
// 导入创建堆栈导航方法
创建导航
const Stack = createStackNavigator();
创建导航需要的页面
function Home() {
return (
<View>
<Text>首页</Text>
</View>
);
}
function Details() {
return (
<View>
<Text>详情页面</Text>
</View>
);
}
包装页面
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Details" component={Details} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
导航
navigation 从路由组件的props中获取
navigation.push('Details') 切换页面
navigation.replace('Details') 替换页面
navigation.goBack() 返回
navigation.popToTop() 回到最顶层页面
<Button
title="再一次跳转详情"
onPress={() => navigation.push('Details')} />
<Button
title="返回"
onPress={() => navigation.goBack()} />
<Button
title="回到顶层"
onPress={() => navigation.popToTop()} />
参数传递
传递参数
<Button
title="跳转到详情"
onPress={() => {
navigation.navigate('Details', {
itemId: 86,
otherParam: '你想传递参数',
});
}}
/>
接受参数
通过props的route.params中获取参数
function DetailsScreen({ route, navigation }) {
const { itemId } = route.params;
const { otherParam } = route.params;
return (...)
}
初始化参数
<Stack.Screen
name="Details"
component={DetailsScreen}
initialParams={{ itemId: 42 }}
/>
配置标题
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ title: '首页' }}
/>
<Button
title="更新标题"
onPress={() => navigation.setOptions({ title: '新标题' })}
/>
标题样式
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
title: 'My home',
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}
/>
options跨屏幕共享
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}
>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ title: 'My home' }}
/>
</Stack.Navigator>
顶部导航
导入组件
import { NavigationContainer } from '@react-navigation/native';
// 导入导航容器
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
// 导入创建顶部部导航方法
创建导航
const TabTop = createMaterialTopTabNavigator();
创建导航需要页面
function Hot() {
return (
<View>
<Text>推荐</Text>
</View>
);
}
function Channel() {
return (
<View>
<Text>频道页面</Text>
</View>
);
}
包装页面
function Main(props){
return(
<TabTop.Navigator tabBarOptions={{
activeTintColor:"#f30",
indicatorStyle:"#f30",
inactiveTintColor:"#999",
tabStyle: { width: 150 },
scrollEnabled:true
}}>
<TabTop.Screen name="hot" component={home} options={{ tabBarLabel:'推荐'}} />
<TabTop.Screen name="p1" component={Channel} options={{ tabBarLabel:'段子'}} />
<TabTop.Screen name="p2" component={Channel} options={{ tabBarLabel:'汽车'}} />
<TabTop.Screen name="p3" component={Channel} options={{ tabBarLabel:'娱乐'}}/>
<TabTop.Screen name="p4" component={Channel} options={{ tabBarLabel:'军事'}}/>
<TabTop.Screen name="p5" component={Channel} options={{ tabBarLabel:'体育'}}/>
</TabTop.Navigator>)
}
export default Main;
tabBarOptions
activeTintColor:"#f30", // 激活颜色
indicatorStyle:"#f30", // 标记线颜色
inactiveTintColor:"#999", // 未激活颜色
tabStyle: { width: 150 }, // 标签栏样式
scrollEnabled:true // 滚动标签栏
底部导航
导入组件
import { NavigationContainer } from '@react-navigation/native';
// 导入导航容器
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
// 导入创建底部导航方法
创建导航
const Tab = createBottomTabNavigator();
创建导航需要页面
function Home() {
return (
<View>
<Text>首页</Text>
</View>
);
}
function Details() {
return (
<View>
<Text>详情页面</Text>
</View>
);
}
包装页面
function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen component={Home} name="Home" />
<Tab.Screen component={Details} name="Details" />
</Tab.Navigator>
</NavigationContainer>
);
}
export default App;
导航切换
<Button title="用户中心"
onPress={() => this.props.navigation.navigate('user')} />
嵌套路由导航切换
navigation.navigate('Root', {
screen: 'Settings',
params: { user: 'jane' },
});