加载新屏幕但停留在一页上的按钮答案

【问题标题】：Button to load new screen but staying on one page加载新屏幕但停留在一页上的按钮
【发布时间】：2021-08-20 20:00:24
【问题描述】：

好的，所以我正在努力完成这些照片所显示的内容。我希望能够从列表（这是一个具有白色背景的视图，其中包含一些内容）到单击地图时，它不一定会更改页面，但它确实会加载此地图屏幕。

对于本机反应，最好的方法是什么？我试着用谷歌搜索，但找不到太多，很难用谷歌搜索。

谢谢你们，我比你们知道的更感激。

【问题讨论】：

如何加载新内容？
可能有几种方法可以做到这一点。你试过什么？ stackoverflow.com/help/minimal-reproducible-example
@Domino987 我通过堆栈加载新内容。用按钮穿过堆栈。德鲁里斯我还没有尝试过任何东西。我没有做这件事的想法
好吧，既然您想“保持在同一页面上”，那么您很可能正在寻找 Conditional Rendering 作为一种简单的低保真解决方案，但当然也可以使用导航包来实现，或其他。这取决于您现有的代码结构和您想要使用的熟悉程度。由于这个问题过于宽泛，并且对固执己见的答案持开放态度，因此请尝试将您的查询焦点缩小到更具体的主题/问题。
好的，请注意。谢谢你的洞察力。我会调查这些！

标签： reactjs react-native react-native-maps

【解决方案1】：

我想你可能会问如何有条件地渲染一些东西。您可以根据另一个变量的值来渲染组件。像这样。

  const [viewMode, setViewMode] = useState('list');

  const handleShowListPress = () => {
    setViewMode('list');
  };

  const handleShowMapPress = () => {
    setViewMode('map');
  };

  ...

  return (
     <View>
        <ListButton onPress={handleShowListPress} />
        <MapButton onPress={handleShowMapPress} />

        {viewMode === 'list' && <ListView />}
        {viewMode === 'map' &&  <MapView />}
     </View>
  );

【讨论】：