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

Извините, но вы плохо реализовали API-интерфейс React Context. Прочтите этот 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 Component в качестве параметра.

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

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

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

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

//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);

ВАШ профиль. Вы должны изменить способ его создания как потребителя. Лучше использовать функцию 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>
        );
    }

}