Chaoszhu'Blog

Appearance

navigation的使用 ​

navigation文档

路由区别 ​

navigation.push('Detail') 导航到Detail路由(无论目标路由是哪个都会在堆栈产生一个路由记录)

navigation.navigate('Detail') 导航到Detail路由(例如在Detail页面中调用导航到Detail页面不会产生路由记录)

navigation.goBack() 返回上一个路由(同设备的物理返回)

navigation.popToTop() 返回堆栈中的第一个路由(此时路由记录全部丢弃;也可以使用navigation.navigate('Home')同样效果)

路由参数传递 ​

navigate和push的第二个参数用于路由传值

js
// 路由
<Button
  title="navigate to Login"
  onPress={() => navigation.navigate('Login', { id: 123, title: '123' })}
/>
// 从props中的route.params对象获取
const Login = ({ route, navigation }) => {
  console.log(route.params) // { id: 123, title: '123' }
}

常用配置项 ​

js
// 全局统一的标题样式(可使用setOptions覆盖)：
<Stack.Navigator
  initialRouteName="Home"
  screenOptions={{
    title: '默认标题'
  }}>
  <Stack.Screen
    name="Details"
    component={DetailsScreen}
    // 每个子路由页面的初始化params
    initialParams={{ itemId: 42 }}
    // 页面配置：route 为页面的路由对象
    options={({ route }) => ({ title: route.params.name || '未传递' })}
  />
</Stack.Navigator>

// 动态设置标题
<Button title = "动态设置标题和样式"
  onPress = {
    () => navigation.setOptions({title: '动态设置标题'})
  }
/>

// 常用标题配置项：https://reactnavigation.org/docs/native-stack-navigator#options
let options = {
  title: '动态设置标题',
  headerShown: false, // 是否展示导航栏
  headerTitleAlign: 'center', // 标题位置
  headerBackVisible: true, // 是否展示返回按钮
  headerTintColor: 'rgba(0, 0, 0, 0.9)', // 返回按钮颜色
  headerStyle: {
    backgroundColor: '#FFFFFF',
    height: 100,
  },
  headerTitleStyle: {
    // 标题样式
    fontWeight: '700',
    fontSize: 17,
    color: 'rgba(0, 0, 0, 0.9)',
  },
  animation: 'slide_from_right', // 动画
  contentStyle: {
    backgroundColor: '#FFF', // 内容区背景色
  }
}

注意

使用tabs导航时加载闪动解决：外层包括SafeAreaProvider即可