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

49
4

Привет, ребята, я просто начинаю изучать родной контекст React. Я хочу знать, как я могу реализовать это как глобальное глобальное состояние, а также не работать после перехода на другой экран и почему мы включаем имя класса в провайдер <ProfileScreen screen= {this.state.contextData}/> можем ли мы сделать это глобально.. здесь мой код

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>
)
}
}

экран профиля класса, который может отображать мои данные

class ProfileScreen extends Component<Props> {
render() {
return (
<View style={{}}>
<Context.Consumer>
{data=> <Text style={{fontSize:50}}>{data}</Text>}
</Context.Consumer>
</View>
);
}
}

экраны профиля профиля, которые также являются поставщиками

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:0
}

}

render() {
return (
<View >
<Context.Provider value={this.state.contextData}>
<Button title="decrement" onPress={()=>{ this.props.changeHomeScreen() }}/>
<Button title='sd' onPress={()=>{this.props.navigation.navigate(Profile)}}/>
</Context.Provider>
</View>
);
}
}

мой навигатор

export default HomeScreen = createStackNavigator({
HomeScreen:{
screen:HomeScreen
},
Profile:{
screen:ProfileScreen
},
ProfileScreens:{
screen:ProfileScreens
},
})

спросил(а) 2018-10-10T10:24:00+03:00 1 год, 4 месяца назад
1
Решение
49

Извините, но вы плохо реализовали 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>
);
}

}

ответил(а) 2018-10-10T12:52:00+03:00 1 год, 4 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема