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
}

Application header

Answer 1

您是刚开始反应还是反应原生？

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

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

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

setSearchButtonIcon('new-icon-name')

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

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

Answer 2

您可以通过更改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 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>;
}

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

3 个答案: