在 NavigationOptions 中调用 setstate 反应原生

Question

我正在尝试更改 navigationOptions 中的状态值。

我的导航选项

static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;
   // alert(params.searchText);
    return {
      headerLeft: (params.searchText) ? <View
        style={{
          flexDirection:
            'row', justifyContent: 'center'
        }}>
        <TouchableOpacity
          onPress={()=> {
            // navigation.navigate('home');
            alert('Coming soon ');
          }}>
          <Image style={{ marginLeft: 20, height: 20, width: 20, resizeMode: "contain" }}
            source={require('../assets/header_icons/three_logo.png')}
          />
        </TouchableOpacity>
      </View> :
        <View style={{
          flexDirection:
            'row', justifyContent:
            'center'
        }}>
          <TouchableOpacity
            onPress={()=> {

            this.setState({
             loadUrl: "card.html#!/customer-dashboard?userType=Authenticated",
            showWeb:true,

           });

            }}>

            <Image style={{ marginLeft: 20, height: 20, width: 20, resizeMode: "contain" }}
              source={require('../assets/header_icons/icon_arrow_left.png')}
            />

          </TouchableOpacity>
        </View>,
    }
  }

它正在抛出this.setState is not an function

请告诉我如何实现这一点。我们如何从静态navigationOptions改变状态值

Answer 1

你可以使用 redux 商店。 store.js

import ReduxThunk from "redux-thunk";
import { createStore, combineReducers, applyMiddleware } from "redux";

import authReducer from "./reducers/auth";
import dashboardReducer from "./reducers/dashboard";
import profileReducer from "./reducers/profile";

const rootReducer = combineReducers({
  auth: authReducer,
  dashboard: dashboardReducer,
  profile: profileReducer
});

export default createStore(rootReducer, applyMiddleware(ReduxThunk));

仪表板.js

import React, { Component } from "react";
import {
  View,
  Text,
  Image,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
  ScrollView,
  ActivityIndicator
} from "react-native";
import OrientationScreen from "./OrientationScreen";
import { connect, useDispatch } from "react-redux";
import store from "../store/store";

class Dashboard extends Component {
render() {
    const dashboard = this.props;
    if (dashboard.orientation) {
      return <OrientationScreen />;
    } else {
      return (
        <View style={styles.screen}>
          {this.props.dashboard.loading && (
            <View style={styles.loading}>
              <ActivityIndicator color={Colors.blueButton} size="large" />
            </View>
          )}
          <Text>You are logged in</Text>
        </View>
      );
    }
  }
   _openOrientation() {
    store.dispatch(dashboardActions.openOrientation());
  }
  static navigationOptions = ({ navigation, navigationOptions }) => {
    const params = navigation.state.params || {};
    return {
      headerTitle: "Dashboard",
      headerRight: (
        <HeaderButtons HeaderButtonComponent={HeaderButton}>
          <Item
            Title="Orientation"
            iconName="ios-help-circle-outline"
            iconSize={30}
            onPress={params.openOrientation}
          />
          <Item
            Title="Menu"
            iconName="ios-menu"
            iconSize={30}
            onPress={() => navigation.toggleDrawer()}
          />
        </HeaderButtons>
      )
    };
  }
 }
 const mapStateToProps = state => {
  const { auth, dashboard } = state;
  return { auth, dashboard };
};
export default connect(mapStateToProps)(Dashboard);

actions/dashboard.js

const openOrientation = () => {
  return dispatch => {
    return dispatch({
      type: "OPEN_ORIENTATION"
    });
  };
};

export default {
  openOrientation
};

reducers/dashboard.js

const initialState = {
  loading: false,
  error: null,
  orientation: false,
  UserData: null
};

export default (state = initialState, action) => {
  switch (action.type) {
    case "OPEN_ORIENTATION":
      return {
        ...state,
        orientation: true
      };
    case "CLOSE_ORIENTATION":
      return {
        ...state,
        orientation: false
      };
    case "LOADING":
      return {
        ...state,
        error: null,
        loading: true
      };
    default:
      return state;
  }
};

SwiperFlatList.js

import React, { PureComponent } from "react";
import { Text, Dimensions, Image, StyleSheet, View } from "react-native";

import SwiperFlatList from "react-native-swiper-flatlist";

export default class OrientationScreen extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      images: [
        require("../assets/images/SLIDE-1.jpg"),
        require("../assets/images/SLIDE-2.jpg"),
        require("../assets/images/SLIDE-3.jpg"),
        require("../assets/images/SLIDE-4.jpg"),
        require("../assets/images/SLIDE-5.jpg"),
        require("../assets/images/SLIDE-6.jpg"),
        require("../assets/images/SLIDE-7.jpg"),
        require("../assets/images/SLIDE-8.jpg"),
        require("../assets/images/SLIDE-9.jpg"),
        require("../assets/images/SLIDE-10.jpg"),
        require("../assets/images/SLIDE-11.jpg"),
        require("../assets/images/SLIDE-12.jpg"),
        require("../assets/images/SLIDE-13.jpg"),
        require("../assets/images/SLIDE-14.jpg"),
        require("../assets/images/SLIDE-15.jpg"),
        require("../assets/images/SLIDE-16.jpg"),
        require("../assets/images/SLIDE-17.jpg"),
        require("../assets/images/SLIDE-18.jpg"),
        require("../assets/images/SLIDE-19.jpg"),
        require("../assets/images/SLIDE-20.jpg"),
        require("../assets/images/SLIDE-21.jpg"),
        require("../assets/images/SLIDE-22.jpg"),
        require("../assets/images/SLIDE-23.jpg"),
        require("../assets/images/SLIDE-24.jpg"),
        require("../assets/images/SLIDE-25.jpg"),
        require("../assets/images/SLIDE-26.jpg"),
        require("../assets/images/SLIDE-27.jpg"),
        require("../assets/images/SLIDE-28.jpg"),
        require("../assets/images/SLIDE-29.jpg"),
        require("../assets/images/SLIDE-30.jpg"),
        require("../assets/images/SLIDE-31.jpg"),
        require("../assets/images/SLIDE-32.jpg")
      ]
    };
  }
  render() {
    const orientationBody = this.state.images.map((item, i) => {
      return (
        <View key={i} style={styles.child}>
          <Image
            source={item}
            resizeMode="contain"
            style={styles.imageprofile}
          />
        </View>
      );
    });
    return (
      <View style={styles.container}>
        <SwiperFlatList
          index={0}
          removeClippedSubviews={false}
          showPagination={false}
        >
          {orientationBody}
        </SwiperFlatList>
      </View>
    );
  }
}

export const { width, height } = Dimensions.get("window");

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white"
  },
  child: {
    height: height * 0.8,
    width,
    justifyContent: "center"
  },
  text: {
    fontSize: width * 0.5,
    textAlign: "center"
  },
  imageprofile: {
    width: "100%"
  }
});