Reactjs react-native中的上下文API_Reactjs_React Native_React Native Android_React Native Ios

Reactjs react-native中的上下文API

reactjs react-native

Reactjs react-native中的上下文API,reactjs,react-native,react-native-android,react-native-ios,Reactjs,React Native,React Native Android,React Native Ios,嘿，伙计们，我刚开始学习React本地上下文api，我想知道如何像全局状态一样全局地实现它导航到另一个屏幕后，它也不起作用，为什么我们要在provider中包含类名？我们可以在全局范围内这样做吗。。这是我的密码 global.cart=1 const Context = React.createContext(global.cart) class HomeScreen extends Component<Props> { constructor(props){

嘿，伙计们，我刚开始学习React本地上下文api，我想知道如何像全局状态一样全局地实现它导航到另一个屏幕后，它也不起作用，为什么我们要在provider

中包含类名？我们可以在全局范围内这样做吗。。这是我的密码

global.cart=1
const Context = React.createContext(global.cart)

class HomeScreen extends Component<Props> {
    constructor(props){
      super(props);
      this.state={
            contextData:5
           }
      }

      Incrementhome=()=>{

        this.setState({contextData:global.cart})
          global.cart++
      }
      Decrementhome=()=>{
        this.setState({contextData:global.cart})
        global.cart--
      }
  render() {
    return (
      <View>
      <Context.Provider value={this.state.contextData}>
        <Button title="Incrementhome"
          onPress={this.Incrementhome}/>
          <Button title="decrementhome"
            onPress={this.Decrementhome}/>

<ProfileScreen screen= {this.state.contextData}/>
      </Context.Provider>
<Button title='sd' onPress={()=>{this.props.navigation.navigate('Profile')}}/>

      </View>
    )
  }
}

很抱歉，您没有很好地实现React上下文API。读这个

如果使用

Context.Consumer

，则通过

screen

prop传递

contextData

的方式是无用的

navigation.navigate

将字符串而不是反应组件作为参数

我真的不知道如何简单地解释您，所以我将重写您的代码，说明您必须如何完成这项工作

您的导航器（某处/navigation.js）

您的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);

最后，您与提供商和消费者的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;
}

//在您的上下文中/home.js
const HomeContext=React.createContext（）；
导出类HomeProvider扩展React.Component{
状态={
contextData:5//默认值
};
递减率=（）=>{
this.setState（prevState=>{
contextData:prevState.contextData-1；
});
}
递增主页=（）=>{
this.setState（prevState=>{
contextData:prevState.contextData+1；
});
}
getValues=（）=>{
返回{
contextData:this.state.contextData，
decrement:this.DecrementThome，//通过homeProvider属性调用
增量：this.incrementHome//通过homeProvider属性调用
}
}
render（）{
返回(
{this.props.children}
);
}
}
使用HomeContext导出函数（组件）{
类ComponentWithContext扩展了React.Component{
渲染{
返回(
{（值）=>
);
};
}
返回组件WithContext；
}

现在在你的根应用程序中

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

export default class App extends React.Component {

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

}

从“/somwhere/context/home”导入{HomeProvider}；
从“/somwhere/navigation”导入主页；
导出默认类App扩展React.Component{
render（）{
返回(
);
}
}

很抱歉，您没有很好地实现React上下文API。请阅读以下内容