Question

在我的React Native应用程序中，我使用React Navigation。

这是一个使用户能够搜索基础数据库（即名称）的应用程序。下面的GIF说明了导航。

在登录屏幕上，按下Go to search按钮（“主堆栈导航器”）->出现“页眉”，没事。在第二个屏幕上，有一个bottomTabNavigator，其中选择了names（在names中，有第二个StackNavigator嵌套）。

这将导致第三个屏幕。在这里，显示了三张牌。在第二个StackNavigator的帮助下，单击Mehr将打开一个详细信息屏幕。

我想要实现的是，一旦用户打开详细信息屏幕，第一个StackNavigator的标题（顶部的标题）就会消失。

您在那里看到一个按钮，因为在第一步中，我想让按钮单击时页眉消失。如果在直接从第一个StackNavigator派生的屏幕中实施以下代码，则该代码有效。但是因为我在嵌套导航器中，所以它不再起作用。

代码如下：

App.tsx：

imports ...

class RootComponent extends React.Component {
  render() {
    const image = require('./assets/images/corrieBackground3.png');

    console.log('calling the store', this.props.resultValue); // undefined

    return (
      <View style={styles.container}>
          <LandingPage />
      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    LandingPage: {
      screen: RootComponent,
      navigationOptions: {
        header: null,
      },
    },
    SearchScreen: {
      screen: SearchScreen,
      navigationOptions: {
        title: 'I SHOULD DISAPPEAR',
      },
    },
  },
  {
    initialRouteName: 'LandingPage',
  },
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

TwoTabs.tsx（用于第二个屏幕）：

imports ...

const SearchBarStack = createStackNavigator(
  {
    SearchBar: {
      screen: SearchBar,
      navigationOptions: {
        header: null,
      },
    },
    Details: {
      screen: Details,
      navigationOptions: {
        title: 'I am here, above header disapear',
      },
    },
  },
  {
    initialRouteName: 'SearchBar',
  },
);

const TabNavigator = createBottomTabNavigator(
  {
    One: {
      screen: SearchCriteria,
      navigationOptions: {
        tabBarLabel: 'criteria',
      },
    },
    Two: {
      screen: SearchBarStack,
      navigationOptions: {
        tabBarLabel: 'names',
      },
    },
  },
);

const TabLayout = createAppContainer(TabNavigator);

type Props = {};

const TwoTabsHorizontal: React.FC<Props> = ({}) => {
  return (
    <View>
      <TabLayout />
    </View>
  );
};

export default TwoTabs;

SearchBar.tsx（第三个屏幕的骨架）：

import ...

type Props = {};

const SearchBar: React.FC<Props> = () => {
// logic to perform database query

  return (
    <View>
      <ScrollView>
        ... logic
        <SearchResult></SearchResult> // component that renders 3 cards
      </ScrollView>
    </View>
  );
};

export default SearchBar;

Card.tsx（由SearchResult渲染的卡片）：

imports ...

type Props = {
  title: string;
  navigation: any;
};

const Card: React.FC<Props> = ({title, navigation}) => {
  return (
    <Content>
      <Card>
        <CardItem>
          <Right>
            <Button
              transparent
              onPress={() => navigation.navigate('Details')}>
              <Text>Mehr</Text>
            </Button>
          </Right>
        </CardItem>
      </Card>
    </Content>
  );
};

export default withNavigation(Card);

最后，Details屏幕及其Content。在这里，第一个StackNavigator的Header应该被隐藏。

imports ...

type Props = {};

const Details: React.FC<Props> = ({}) => {
  return (
    <View>
      <Content></Content>
    </View>
  );
};

export default Details;

imports ...

type Props = {
  navigation: any;
};

class Content extends React.Component {
  state = {
    showHeader: false,
  };

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

  hideHeader = (hide: boolean) => {
    this.props.navigation.setParams({
      headerShown: !hide,
    });
    console.log('props ', this.props.navigation);
  };
  render() {        
    return (
      <View>
        <View>
        </View>
        <Button
          title={'Press me and the header will disappear!'}
          onPress={() => {
            this.setState({showHeader: !this.state.showHeader}, () =>
              this.hideHeader(this.state.showHeader),
            );
          }}
        />
      </View>
    );
  }
}

export default withNavigation(CardExtended);

也许有人有主意吗？

反应导航：嵌套导航器中的setParams

0 个答案: