从React Native的Drawer菜单更新Stack Navigator屏幕的状态

时间:2019-08-06 13:09:32

标签: react-native react-navigation react-navigation-drawer

我已经使用react导航在react native应用程序中创建了一个抽屉导航菜单,并添加了一些屏幕,例如Screen 1,2 ...等。现在在我的抽屉菜单中我有应用程序图标,并且在该菜单下面有现在按此图标,我需要重新渲染屏幕1。

class CustomDrawer extends Component {
    constructor(props) {
        super(props);
    }

    onAppIconClicked() {
        //here update the state of Screen 1
    }

    render() {
        return (
            <SafeAreaView style={styles.drawercontainer}>
                <View style={styles.drawermenu}>
                    <TouchableOpacity
                        style={styles.drawericon}
                        onPress={this.onAppIconClicked.bind(this)}
                    >
                        <Image
                            source={require("./src/images/mainicon.png")}
                            style={{ height: height(15), width: width(17), borderRadius: height(15) / 2 }}
                            resizeMode="contain"
                        />
                    </TouchableOpacity>
                </View>
                {/* some drawer items component */}
            </SafeAreaView>
        )
    }
}

const DrawerNavigatorExample = createDrawerNavigator({
    // Drawer Optons and indexing
    Screen0: {
        //Title
        screen: Screen1,
        navigationOptions: ({ navigation }) => {
            return {
                drawerLabel: () => null,
            }
        }
    },
    contentComponent: CustomDrawer
})

export default createAppContainer(DrawerNavigatorExample);

enter image description here

0 个答案:

没有答案