Как управлять некоторыми действиями или состоянием снаружи при использовании реакции-навигации?

Question

Если я перейду с экрана A на экран B с помощью react-navigation.

, он автоматически сгенерирует Header.

Поэтому, если я хочу добавить какую-то кнопку, имейте в виду подобное состояние управления или вызовите API на Header.

. Я должен добавить static navigationOptions, как это

class B extends Component {
  static navigationOptions = ({ navigation }) => ({
    title: `${navigation.state.params.barTitle}`,
    headerBackTitle: null,
    headerTintColor: '#fff',
    headerRight:
    <TouchableOpacity 
      style={{ flexDirection: 'row', paddingRight: 20 }}
      onPress={() => {
        callApi();
      }} 
    >
      <Text>Call API</Text>
    </TouchableOpacity>
  });

  // other code...
}

Но он объявляет static navigationOptions в классе B.

Если Я установил все свои настройки react-navigation в другой папке:

навигатор / указатель. js

import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';

import RootScreen from '../screens/RootScreen';
import LoginStack from './LoginStack';
import MainStack from './MainStack';

const RootStack = createSwitchNavigator(
  {
    RootScreen: RootScreen,
    LoginStack: LoginStack,
    MainStack: MainStack
  },
  {
    initialRouteName: 'RootScreen',
  }
)


const AppContainer = createAppContainer(RootStack);

export default AppContainer;

навигатор / LoginStack. js

import { createStackNavigator } from 'react-navigation-stack';

import LoginScreen from '../screens/LoginScreen';
import A from '../screens/A';
import B from '../screens/B';

const LoginStack = createStackNavigator(
  {
    LoginScreen: { screen: LoginScreen },
    A: { screen: A },
    B: { screen: B }
  },
  {
    initialRouteName: 'LoginScreen',
    headerMode: 'none'
  }
);

export default LoginStack;

Я не могу понять, как мне добиться того, чтобы управлять состоянием или вызывать действия API для файла LoginStack.js?

Не считайте настройку моей Header. Если я хочу использовать react-navigation Header. Единственный способ, которым я должен объявить static navigationOptions в классе B?

Answer 1

Ваш вопрос недостаточно ясен.

Из какого файла вы пытаетесь вызвать API в LoginStack. js? Под состоянием управления вы подразумеваете состояние навигации или состояние компонента?

Я понял, что вы хотите вызывать API на каждом экране маршрута, поскольку API находится в родительском файле.

Вы можете передать screenProps для вызова API, как показано ниже. (Вы можете отредактировать метод рендеринга, добавив собственный заголовок)

import React from 'react';
import {View, Text, Button} from 'react-native';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

// Login Stack
import ScreenA from './ScreenA';
import ScreenB from './ScreenB';

const LoginStackRoute = createStackNavigator(
  {
    ScreenA: ScreenA,
    ScreenB: ScreenB
  },
  {
    initialRouteName: 'ScreenA',
    headerMode: 'none'
  }
);

var LoginStackContainer = createAppContainer(LoginStackRoute);

export default class LoginStack extends React.Component{
  alertTest(){
    alert('hi')
  }
  render(){
    return(
      <>
        <View style={{height:50,width:'100%', backgroundColor:'red'}}>
          <Text>Custom Header</Text>
        </View>
        <LoginStackContainer screenProps={{alertTest: ()=>this.alertTest()}}/>
      </>
    )
  }
} 

ScreenA или ScreenB могут обращаться к API в файле маршрута как

import React from 'react';
import {View, Text, Button} from 'react-native';


export default class ScreenA extends React.Component{
  render(){
    return(
      <View>
        <Text>This is Screen A</Text>
        <Button 
          title='alert'
          onPress={()=>{this.props.screenProps.alertTest()}}
        ></Button>
      </View>
    )
  }
}