0

我想在底部导航栏中访问 MainAct 类的 this.state。这样当 this.state 更新导航栏时会重新渲染。

这是我的代码。

我想在底部导航栏的“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 },
    });

4

1 回答 1

1

如果您BottomNavigator必须访问屏幕的状态，则您的状态可能位于错误的位置。您应该考虑为您的应用程序设置一个全局状态，因为 React 中的数据流应该是单向的，并且父组件不应该只访问子状态。

有多种方法可以做到这一点，比如redux、mobx、hooks或任何你喜欢的状态管理库。如果你有一个全局状态，BottomNavigator和MainAct都可以访问它。

于 2019-03-04T10:18:57.373 回答