React Navigation 初探 - 自定义导航按钮

React Navigation 初探 - 标题按钮

在导航栏添加一个按钮

在标题左边或右边放置按钮时最常见. 让我们在标题右边添加一个按钮(一个屏幕总难以触碰的位置)

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerTitle: props => <LogoTitle {...props} />,
          headerRight: () => (
            <Button
              onPress={() => alert('This is a button!')}
              title="Info"
              color="#fff"
            />
          ),
        }}
      />
    </Stack.Navigator>
  );
}

在 Snack 尝试

当我通过这种方式定义 button 时, 这里的 option 中的 this 不是 HomeScreen 实例,你不能调用 setState 或者其他实例方法. 导航栏中的按钮和页面交互是很常见的,因此要特别注意.

导航栏按钮与页面交互

为了能够与页面交互,我们使用 navigation.setOptions 替换 options 来定义 button. 通过在页面中使用 navigation.setOptions 我们可以获取页面 属性,状态,上下文等.

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={({ navigation, route }) => ({
          headerTitle: props => <LogoTitle {...props} />,
        })}
      />
    </Stack.Navigator>
  );
}

function HomeScreen({ navigation }) {
  const [count, setCount] = React.useState(0);

  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Button onPress={() => setCount(c => c + 1)} title="Update count" />
      ),
    });
  }, [navigation]);

  return <Text>Count: {count}</Text>;
}

在 Snack 尝试

自定义返回按钮

createNativeStackNavigator为后退按钮提供特定于平台的默认值。在 iOS 上，这包括按钮旁边的标签，当标题适合可用空间时，它会显示上一屏幕的标题，否则显示“返回”。

您可以使用 更改标签行为headerBackTitle并为其设置样式headerBackTitleStyle。

要自定义后退按钮图像，您可以使用headerBackImageSource。

覆盖后退按钮

可以通过设置 headerLeft 覆盖返回按钮,实现页面返回功能.