React Native 搜索栏与 react-navigation答案

【问题标题】：React Native searchbar with react-navigationReact Native 搜索栏与 react-navigation
【发布时间】：2019-11-20 10:13:33
【问题描述】：

我想在我的标题中添加一个搜索栏。我正在使用 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>
        )
    }
};

【问题讨论】：

您是否尝试过自定义标题？我通常禁用反应导航的标题并做了我自己的自定义标题
我是 React Native 的新手，所以我尝试尽可能多地使用现有组件。但是，没有简单的解决方法可以让它与 react-navigation 一起使用吗？构建它的方法是使用自定义标题？
是的，我会给出一个我在一段时间内实现的自定义标题
自定义标题是要走的路。我还建议学习 Redux，因此当您单击标题时，状态会发生变化，并且根据状态您的图标等会发生变化。这是一个可扩展的解决方案。

标签： reactjs react-native header searchbar

【解决方案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>
        )
    }
};

【讨论】：

【解决方案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>
        )
    }
};

【讨论】：