Как получить доступ к this.state класса в нижней панели навигации (React Native) - PullRequest
Новая
       57

Как получить доступ к this.state класса в нижней панели навигации (React Native)

0 голосов
/ 04 марта 2019

Я хочу получить доступ к этому состоянию класса MainAct в нижней панели навигации.Так что, когда this.state обновляет панель навигации, она перерисовывает .

Вот мой код.

Я хочу получить доступ к «this.state.data» в «MainAct» нижней панели навигации,(или любые другие варианты)

И экспортирует ли 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 },
    });

1 Ответ

0 голосов
/ 04 марта 2019

Если ваш BottomNavigator должен получить доступ к состоянию вашего экрана, возможно, ваше состояние не в том месте.Вам следует подумать о наличии глобального состояния для вашего приложения, поскольку поток данных в React должен быть однонаправленным, а родительские компоненты не должны просто получать доступ к дочернему состоянию.

Существуют различные способы сделать это, например, redux , mobx , hooks или любая другая библиотека управления состоянием, которая вам нравится.Если у вас есть глобальное состояние, то и BottomNavigator, и MainAct могут иметь к нему доступ.

...