React Native 搜索栏与反应导航

Question

我想在我的标题中添加一个搜索栏。我正在使用反应导航，并且想要创建如下两张图片所示的效果。当您按下搜索图标时，汉堡包图标将变为向后箭头图标，标题将变为搜索字段。我尝试使用 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>
        )
    }
}; 

Answer 1

尝试使用状态兄弟！

  constructor(props) {
        super(props);
        this.state = {
             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={() => {this.setState({search:false})}}
        />
    </HeaderButtons>
);

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

Answer 2

我已经通过使用 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>
        )
    }
};