Контекстный API в React Native

Извините, но вы плохо реализовали React Context API. Прочтите это https://medium.com/@mcssym/react-context-api-why-you-dont-surely-need-redux-co-e6d96ca8abca?source=linkShare-1d75ea07b723-1539164899

Способ передачи contextData через опору screen бесполезен, если вы используете Context.Consumer.

navigation.navigate принимает в качестве параметра нить, а не Компонент React.

Я действительно не знаю, как вам легко объяснить, поэтому я перепишу ваш код, указав, как вы должны выполнять эту работу.

ВАШ НАВИГАТОР (где-то / navigation.js)

export default Home = createStackNavigator({
    HomeScreen:{
        screen: HomeScreen
    },
    Profile:{
        screen: ProfileScreen
    },
    ProfileScreens:{
        screen: ProfileScreens // Don't need to be a Provider
    },
})

Ваш ProfileScreens не обязательно должен быть провайдером, потому что вы не используете его в качестве оболочки. Но может быть Потребителем, потому что вы используете contextData. Я думаю, это то же самое, что и на вашем домашнем экране, и на том, который вы хотите сделать глобальным.

//IMPORTANT
import { withHomeContext } from './somewhere/contexts/home';

class ProfileScreens extends Component<Props> {
    static navigationOptions = {
               title: 'MainActivity',  
               header: <Button title='sd' onPress = {()=> this.props.navigation.navigate('ProfileScreen')}/>
           };
    constructor(props){
        super(props);

        this.state = {
            contextData: props.homeProvider.contextData // Get from global context home provider
        };
    }

    decrementHome = () => {
        // Calling decrement from homeProvider
        if (this.props.homeProvider) this.props.homeProvider.decrement();
    }

    render() {
        return (
            <View >
                {/*You must call the decrementHome from your provider*/}
                <Button title = "decrement" onPress = {this.decrementHome}/>
                <Button title='sd' onPress = {()=> this.props.navigation.navigate('ProfileScreen') }/>
            </View>
        );
    }
}

export default withHomeContext(ProfileScreens);

ВАШ ProfileScreen. Вы должны изменить способ его создания как Потребитель. Лучше использовать функцию withHomeContext, созданную в вашем классе HomeContext.

//IMPORTANT
import { withHomeContext } from './somewhere/contexts/home';

class ProfileScreen extends Component<Props> {
    render() {
        return (
            <View style = {{}}>
                <Text style = {{fontSize:50}}>{this.props.homeProvider.contextData}</Text>
            </View>
        );
    }
}

export default withHomeContext(ProfileScreen);

И, наконец, ваш HomeContext с вашим поставщиком и потребителем может быть:

// In Your context/home.js

const HomeContext = React.createContext();


export class HomeProvider extends React.Component {

    state = {
        contextData: 5 //Default Value
    };


    decrementHome = () => {
        this.setState(prevState => {
            contextData: prevState.contextData - 1;
        });
    }

    incrementHome = () => {
        this.setState(prevState => {
            contextData: prevState.contextData + 1;
        });
    }

    getValues = () => {
        return {
            contextData: this.state.contextData,
            decrement: this.decrementHome, // Call via homeProvider prop
            increment: this.incrementHome // Call via homeProvider prop
        }
    }

    render() {
        return (
            <HomeContext.Provider value = {this.getValues()}>
                {this.props.children}
            </HomeContext.Provider>
        );
    }
}

export function withHomeContext(Component) {
    class ComponentWithContext extends React.Component {
        render {
            return (
                <HomeContext.Consumer>
                    {(value) => <Component {...this.props} homeProvider = {value} />
                </HomeContext.Consumer>
            );
        };
    }

    return ComponentWithContext;
}

Теперь в вашем корневом приложении

import { HomeProvider } from './somwhere/context/home';
import Home from './somwhere/navigation';

export default class App extends React.Component {

    render() {
        return (
            <HomeProvider>
                <Home />
            </HomeProvider>
        );
    }

}