reactjs - React Native 搜索栏与 react-navigation

Question

我想在我的标题中添加一个搜索栏。我正在使用 react-navigation，并希望创建如下 2 张图片中的效果。当您按下搜索图标时，汉堡包图标变为箭头图标，标题标题变为搜索字段。我曾尝试使用 navigationOptions 来完成此操作，但问题是它是静态的，并且在标题本身发生操作时无法更新。因此，为了试验我想要完成的是，当按下搜索图标时，汉堡包图标变成了一个箭头返回图标。谢谢！

var search = false;

const menuButton = navData => (
    <HeaderButtons HeaderButtonComponent={HeaderButton}>
        <Item 
            title="Menu"
            iconName="ios-menu"
            onPress={() => {
                navData.navigation.toggleDrawer();
            }}
        />
    </HeaderButtons>
);

const goBackButton = navData => (
    <HeaderButtons HeaderButtonComponent={HeaderButton}>
        <Item 
            title="Menu"
            iconName="ios-arrow-back"
            onPress={() => {
                search=false
            }}
        />
    </HeaderButtons>
);

MyScreen.navigationOptions = navData => {
    return {
        headerTitle: 'My title',
        headerLeft: search ? goBackButton : menuButton(navData),
        headerRight: (
            <BorderlessButton
            onPress={() => search=true}
            style={{ marginRight: 15 }}>
            <Ionicons
                name="md-search"
                size={Platform.OS === 'ios' ? 22 : 25}
            />
            </BorderlessButton>
        )
    }
}; 

标签： reactjsreact-nativeheadersearchbar

Answer 1

我已经通过使用 setParams 和 getParam 将信息传递给我的 navigationOptions 来修复它。我面临的唯一问题是无限循环，我可以通过正确使用 useEffect 和 useCallback 来解决。

const MyScreen = props => {
    const dispatch = useDispatch();

    var search = useSelector(state => state.verbs.search);
    useEffect(() => {
        props.navigation.setParams({search: search});
    }, [search]);

    const toggleSearchHandler = useCallback(() => {
        dispatch(toggleSearch());
    }, [dispatch]);

    useEffect(() => {
        props.navigation.setParams({toggleSearch: toggleSearchHandler});
    }, [toggleSearchHandler]);
    return (<View> ...
    </View>
  );
};

MyScreen.navigationOptions = navData => {
    const toggleSearch = navData.navigation.getParam('toggleSearch')
    return {
        headerTitle: 'Verbs',
        headerLeft: navData.navigation.getParam('search') ? gobackButton : menuButton(navData),
        headerRight: (
            <HeaderButtons HeaderButtonComponent={HeaderButton}>
                <Item 
                    title="Menu"
                    iconName="ios-star"
                    onPress={toggleSearch}
                />
            </HeaderButtons>
        )
    }
};