如何使用 React Navigation 动态更改标题图标？

Question

我正在使用 React Native 处理列表，但是当我通过按在 navigationOptions 属性中设置的搜索图标执行搜索时，我希望图标动态更改为另一个图标，以便用户可以取消搜索。 如何通过按下按钮动态更改图标？

static navigationOptions = ({navigation}) => ({
   headerTitle: 'POSTS',
   headerRight: (
     <Icon
      type="Ionicons"
      name="search"
      style={{color:"#FFFFFF", marginRight: 10}}
      size={20}
      onPress={navigation.getParam('openSearchModal')}
    />
  )
});

openSearchModal() {
   //my code is here
}

申请头

Answer 1

您可以通过更改status值来解决此问题。

  constructor(props){
    super(props);
    this.state={
      check : "search"
    }
  }

  static navigationOptions = ({navigation}) => ({
   headerTitle: 'POSTS',
   headerRight: (
     <Icon
      type="Ionicons"
      name={this.state.check === "search" ? "search" : "cancel"}
      style={{color:"#FFFFFF", marginRight: 10}}
      size={20}
      onPress={this.checkfunc(navigation)}
    />
  )
});

checkfunc = (navigation) => {
  if(this.state.check === "search") {
    this.setState({
      check : "cancel"
    });
    navigation.getParam('openSearchModal');
  }else{
    // your code here
  }
}

Answer 2

你是新手反应还是反应原生？

您实际上可以通过使用 Hook 设置状态来实现上述目标（在 React 中相当新）。 为状态指定一个默认图标名称，以便在组件首次呈现时使用它。

const [searchButtonIcon, setSearchButtonIcon] = useState('icon-name')

稍后，您可以设置搜索按钮以调用一个函数，该函数将在onPress期间更新名为searchButtonIcon的状态。 更新状态的代码（如果你使用 Hooks）如下。

setSearchButtonIcon('new-icon-name')

注意：您需要将状态值更新为正确的图标名称。

如果您不打算使用 Hooks（仅在最近的 ReactJs 中可用），那么您也可以使用 Redux 来实现所需的效果。

Answer 3

老问题，但我刚遇到这个问题，所以我想我会分享我必须做的事情。

官方文档建议您使用钩子“useLayoutEffect”设置标题按钮，因为这是在绘制屏幕之前运行的。 但是，您无法在加载内容后更改标题按钮。

因此，您必须使用普通的“useEffect”钩子来允许在开始时加载标题按钮，并随着状态的变化而动态更改。

官方文档显示以下示例： https : //reactnavigation.org/docs/header-buttons/

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>;
}

除了使动态更改的代码之外，标题按钮动态更改：

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);
  const [headerButton, setHeaderButton] = React.useState(false);
  React.useEffect(() => {
      navigation.setOptions({
      headerLeft: () => (<Text>{count}</Text>)
    });
  }, [navigation]);

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

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