Question

每当我在应用程序上切换到暗模式时，应用程序尝试加载导航组件时，它总是总是先从AppNavigator.js加载默认配置组件，然后再加载静态navigationOptions配置，看起来确实很奇怪。

我尝试在每个屏幕上仅设置静态导航选项，但这会导致相同的问题，只是它将显示预设的导航选项。在嵌套导航器方面，我还尝试了不同的方法，但这也不起作用。我尝试在AppNavigator.js中使用react redux，但这也不起作用，因为您不能在React Component之外使用this.props

任何屏幕组件的静态导航选项如下：

// imports 
{ ... }

class HomeView extends React.Component {
  state = { currentUser: null }

  componentDidMount() {
    const { currentUser } = firebase.auth();
    this.setState({ currentUser }); 
  }

  constructor(props) {
    super(props);
  }

  componentWillMount = () => {
    const {setParams} = this.props.navigation;
    setParams({darkModeOn: this.props.darkMode});
  }

  static navigationOptions = ({ navigation }) => {
    const { state } = navigation;

    if (state.params != undefined) {
      return {
        headerTitleStyle: {
          fontFamily: "OpenSans-SemiBold"
        },  
        headerTintColor: state.params.darkModeOn ? "#FFFFFF" : "#000000",
        headerStyle: {
          shadowOffset: { width: 0, height: 1 },
          shadowOpacity: 0.6,
          shadowRadius: 2,
          elevation: 1,
          fontSize: 10, 
          marginTop: Platform.OS === "ios" ? 0 : 20
        },  
        tabBarOptions: {
          activeTintColor: state.params.darkModeOn ? "#FFFFFF" : "#000000",
          inactiveTintColor: state.params.darkModeOn ? "#333333" : "#E0E0E0",
          pressOpacity: 1,
          showIcon: true,
          showLabel: false,
          style: {
            shadowOffset: {
              width: 0,
              height: 2
            },
            shadowOpacity: 0.6,
            shadowRadius: 4,
            elevation: 4,
            backgroundColor: state.params.darkModeOn ? "#000000" : "#FFFFFF"
          }
        },
      };
    } 
  };

// render()
{ ... }

这是我的AppNavigator.js的样子

// Bottom Tab Navigation
const TabNav = createBottomTabNavigator(
{
  Home: { screen: Home},
  Lists: { screen: Lists}, 
  Bookmarks: { screen: Bookmarks},
  Profile: { screen: Profile},
  Settings: {screen: Settings},
},
{
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let IconComponent = Ionicons;
        let iconName; 
        if (routeName === 'Home') {
          iconName = `${focused ? 'ios' : 'md'}-home`;
        } else if (routeName === 'Lists') {
          iconName = `ios-list${focused ? '-box' : ''}`;
        } else if (routeName === 'Bookmarks') {
          iconName =`ios-bookmarks`;
        } else if (routeName === 'Profile') {
          iconName =`ios-analytics`;
        } else if (routeName === 'Settings') {
          iconName = `ios-settings`
        }

        return <IconComponent name={iconName} size={25} color={tintColor} />;
      },
    }), 
    tabBarOptions: {
      activeTintColor: '#000000',
      inactiveTintColor: '#E0E0E0',
      showLabel: false,
      tabStyle: {
        backgroundColor: '#FFFFFF',
      }
    },
}
);

我希望它可以直接从当前屏幕的静态选项中加载，但是似乎没有一种方法，至少我不知道。这是一些有关该问题的视频。 https://streamable.com/kda2o

在默认选项后

0 个答案: