反应原生导航屏幕

Question

我在 react-native 中使用抽屉导航器。

我有主屏幕(有一个项目列表(，另一个屏幕(详细数据屏幕(在选择时每个项目的详细信息。

class HomeScreen extends React.Component {
     render(){
     //code
     }
}

在

主屏幕中，我有两个选项来选择要在平面列表(英语列表和另一种语言列表(上显示的数据。渲染时，默认数据显示在英语列表中。

问题是当数据显示在另一种语言列表中时。我点击了一下，它显示了另一种语言的数据(工作正常(。但是当我导航回来时(它再次显示英文数据，这意味着主屏幕再次加载(。

那么，我该如何解决这个问题。

class DetailDataScreen extends React.Component {
     render(){
     //code
     }
}

Answer 1

您可能在HomeScreen中使用了selectedLanguage状态在语言列表之间切换。卸载HomeScreen时，需要此状态保持不变。

为此，您可以将该状态上移到在屏幕之间切换时不会卸载的父组件：

const DrawerNav = DrawerNavigator({
  // config
});
class App extends React.Component {
  state = {
    selectedLanguage: null,
  };
  render() {
    return <DrawerNav screenProps={{ selectedLanguage: this.state.selectedLanguage }} />;
  }
}
const HomeScreen = props => (props.screenProps.selectedLanguage === 'EN') ? ...

这有点丑陋，因为selectedLanguage将被传递给其他不使用它的屏幕。

更优雅的解决方案是将状态存储在 Redux 中。

Answer 2

应为此当前类型创建一个state。

class HomeScreen extends React.Component {
     render(){
     //code
          {
               this.state.currentType === ENGLISH ?
               <English />
               : <Another />
          }
     }
}