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

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

使用本机搜索栏进行本机搜索栏

2 个答案: