如何访问此

Question

我想访问底部导航栏中的MainAct class Mainact。因此，当此时。STATE更新导航栏Rerenders 。

这是我的代码。

我想在底部导航栏的" mainact"中访问" this.state.data"。（或任何替代方案）

，并且正在导出createMaterialBottomTabnavigator作为默认值好吗？

//jshint ignore: start
import React, { Component } from 'react';
import {
    View,
    Text,
    Image,
} from 'react-native';
window.navigator.userAgent = 'react-native';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
class MainAct extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: 'Hello World'
        }
    }
    render() {
        return (
            <View style={styles.parent}>
                <Text>{this.state.data}</Text>
            </View>
        );
    }
}
export default createMaterialBottomTabNavigator({
    Screen1: {
        screen: Screen1,
        navigationOptions: {
            tabBarLabel: 'Screen1',
            tabBarIcon: ({ tintColor }) => (
                <Image source={me} style={{ width: 20, height: 20 }} />
            )
        }
    },
    Screen2: {
        screen: Screen2,
        navigationOptions: {
            tabBarLabel: 'Screen2',
            tabBarIcon: ({ tintColor }) => (
                <Image source={Chat} style={{ width: 20, height: 20 }} />
            )
        }
    },
    Screen3: {
        screen: Screen3,
        navigationOptions: {
            tabBarLabel: 'Screen3',
            tabBarIcon: ({ tintColor }) => (
                <Image source={homeIcon} style={{ width: 20, height: 20 }} />
            )
        }
    },
    MainAct: {
        screen: MainAct,
        navigationOptions: {
            tabBarLabel: 'MainAct',
            tabBarIcon: ({ tintColor }) => (
                <View>
                    <View style={{ display: 'flex'}}>
                        <View style={{ position: 'absolute', right: -8, top: -5, backgroundColor: '#4CAF50', borderRadius: 200, height: 14, paddingLeft: 4, paddingRight: 4, zIndex: 5 }}>
                            <Text style={{ alignSelf: 'center', marginTop: 0, color: '#FFFFFF', fontSize: 10 }}>{this.state.data}</Text>
                        </View>
                    </View>
                    <Image source={noti} style={{ width: 20, height: 20 }} />
                </View>
            )
        }
    },
    Screen5: {
        screen: Screen5,
        navigationOptions: {
            tabBarLabel: 'Screen5',
            tabBarIcon: ({ tintColor }) => (
                <Image source={new1} style={{ width: 20, height: 20 }} />
            )
        }
    },
}, {
        initialRouteName: 'MainAct',
        activeColor: '#000000',
        inactiveColor: '#000000',
        barStyle: { backgroundColor: '#FFFFFF', height: 60, elevation: 0, shadowColor: 0 },
    });

Answer 1

如果您的BottomNavigator必须访问屏幕状态，则您的状态可能处于错误的位置。您应该考虑使用应用程序的全球状态，因为React中的数据流应该是单向的，父母的组件不应仅仅可以访问孩子的状态。

有多种方法可以做到这一点，例如Redux，Mobx，Hooks或您喜欢的任何状态管理库。如果您具有全球状态，则BottomNavigator和MainAct都可以访问它。