如何为随机内容制作tabBar元素？

Question

我有一个React Native项目，在那里我出版了包含章节的书。我的应用程序可以很好地与章节列表，部分列表等一起使用。但我想为随机阅读主题添加新屏幕。

我正在使用反应导航。

每次用户按下“随机”选项卡时，我想在那里显示另一个随机部分。

现在，当用户按下“随机”选项卡时，将生成随机帖子。然后用户访问另一个选项卡并返回，并生成另一个随机帖子。但是我希望用户能够生成随机帖子，而不必访问另一个选项卡。按随机，生成一个随机帖子。按随机，然后再按一次随机发帖。

看图片，如果用户分别按下Rastgele按钮，我希望组件每次刷新一次，这样他们就可以读取随机的文章，而不必访问另一个选项卡即可使用随机功能。

自昨晚以来，我无法解决这个问题。我将不胜感激。

这是我的代码现在的样子。

App.js

const BookStack = createStackNavigator({
    Home: { screen: HomeScreen },
    Chapter: { screen: ChapterScreen },
    Section: { screen: SectionScreen }
  });

const RandomStack = createStackNavigator({
    Random: { screen: RandomScreen }
  });

const SettingsStack = createStackNavigator({
    Settings: { screen: SettingsScreen }
  });

const App = createAppContainer(
  createBottomTabNavigator(
    {
      Ilmihal: BookStack,
      Rastgele: RandomStack,
      Ayarlar: SettingsStack
    },
    {
      defaultNavigationOptions: ({ navigation }) => ({
        //Icon rendering here
      }),
      tabBarOptions: {
      resetOnBlur: true,
      lazy: false
    }
  )
);

RandomScreen.js

const RandomScreen = () => {
  //sectionTitle, sectionContent, pageTitle generated here

  return (
    <Content>
      <Text>{sectionTitle}</Text>
      {sectionContent.map( (p, index) => <Text key={index}>{p}</Text> )}
    </Content>
  );
};

RandomScreen.navigationOptions = () => {
  return {
    headerTitle: () => (
      <Text style={{ fontSize: 20, fontWeight: "bold" }}>{pageTitle}</Text>
    )
  };
};

Answer 1

基本上，就我所了解的而言，每次从选项卡传递到RandomScreen选项卡时，屏幕都会触发Rastgele功能。问题在于，如果屏幕已经处于焦点位置，您也想触发随机选项卡。

您可以尝试在tabBarOnPress组件中使用RandomScreen函数：

RandomScreen.navigationOptions = () => {
 return {
    headerTitle: () => (
      <Text style={{ fontSize: 20, fontWeight: "bold" }}>{pageTitle}</Text>
    ),
    tabBarOnPress: ({navigation, defaultHandler}) =>{
       //Do what you need for your RandomScreen
       defaultHandler();
    } 
  };