Как использовать реакцию родной навигационной WIX с контекстом для обмена данными от поставщика для всех компонентов? - PullRequest
Новая
       27

Как использовать реакцию родной навигационной WIX с контекстом для обмена данными от поставщика для всех компонентов?

1 голос
/ 02 апреля 2020

Я хочу использовать ответную нативную навигацию с контекстом для отправки данных от поставщика всем моим компонентам. Я сделал это следующим образом:

index. js

import {Navigation} from 'react-native-navigation';
import {App} from './App'

App();

Navigation.events().registerAppLaunchedListener(() => {
    Navigation.setRoot({
        root: {
            stack:
                {
                    id: 'FoodApp',
                    children: [
                        {
                            component: {
                                id: 'myLoginId',
                                name: 'myLogin',
                                options: {
                                    topBar: {
                                        visible: false,
                                        height: 0,
                                    },
                                }
                            }
                        },

                    ],

                },
        },
    });
});

Приложение. js

export const App = () => {

    Navigation.registerComponent(`myLogin`, () => (props) => (

        <GlobalProvider>
            <Login {...props} />
        </GlobalProvider>

    ), () => Login);
    Navigation.registerComponent(`myMain`, () => (props) => (

        <GlobalProvider>
            <Main {...props} />
        </GlobalProvider>

    ), () => Main);

};

GlobalProvider и GlobalContext 

const GlobalContext = React.createContext();

export const GlobalProvider = ({children}) => {


    return <GlobalContext.Provider value={20}>
        {children}
    </GlobalContext.Provider>;
};

export default GlobalContext;

Main. js

const Main = () => {

    const value= useContext(GlobalContext);

    const options = (passProps) => {
        return {
            topBar: {
                height: 0,
            },

        };
    };

    return (

        <View style={styles.mainContainer}>
            <Text>Main {value}</Text>
        </View>

    );
};

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

Я использовал:

«реагировать»: «16.11.0»,

«реагировать-нативный»: «0,62. 0 ",

" реакция-нативная навигация ":" ^ 6.3.3 ",

1 Ответ

1 голос
/ 06 апреля 2020

странно, что значение вообще не отображается, так как ваш фрагмент кода должен отображать value. Я создал нижеприведенный пример, чтобы продемонстрировать интеграцию React Context с response-native-navigation, но, к сожалению, поскольку response-native-navigation не является отдельным приложением root (каждый зарегистрированный экран является "root") обычным шаблоном Context. не будет работать, как ожидалось. 

// CounterContext.js
import React from 'react

const initialCounterState = {
  count: 0
}

const counterContextWrapper = (component) => ({
  ...initialCounterState,
  increment: () => {
    initialCounterState.count += 1
    component.setState({ context: contextWrapper(component) })
  },
  decrement: () => {
    initialCounterState.count -= 1
    component.setState({ context: contextWrapper(component) })
  },
})

export const CounterContext = React.createContext({})

export class CounterContextProvider extends React.Component {
  state = {
    context: counterContextWrapper(this)
  }

  render() {
    return (
      <CounterContext.Provider value={this.state.context}>
        {this.props.children}
      </CounterContext.Provider>
    )
  }
}

// index.js
import { Navigation } from 'react-native-navigation
import { CounterContextProvider } from './CounterContext
import { Main } from './Main

Navigation.registerComponent(
  'Main', 
  () => props => (
    <CounterContextProvider>
      <Main {...props} />
    </CounterContextProvider>
  ),
  () => CounterReactContextScreen
)

// Main.js
import React from 'react'
import { Button, Text, View } from 'react-native'
import { CounterContext } from './CounterContext'

export const Main = () => {
  const { count, increment, decrement } = React.useContext(CounterContext)

  return (
    <View>
      <Text>{`Clicked ${count} times!`}</Text>
      <Button title="Increment" onPress={increment} />
      <Button title="Decrement" onPress={decrement} />
    </View>
  )
}

Это все должно работать, однако предостережение заключается в том, что вы регистрируете 2 экрана с одним и тем же провайдером контекста (например, Main как ваши root и Pushed как экран, который выдвигается из Main), если вы обновляете значение на экране Pushed, он не будет повторно отображать экран Main для отображения обновленного значения.

Я бы порекомендовал использовать MobX если вы хотите Context как API. Вы можете оформить мой шаблонный проект https://github.com/jinshin1013/rnn-boilerplate.

...