React-native 导航屏幕

Question

我在 react-native 中使用 Drawer Navigator。

我有 HomeScreen（有一个项目列表）和另一个屏幕（DetailDataScreen），用于在选择时显示每个项目的详细信息。

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

在主屏幕中，我有两个选项可以选择要在 FlatList 上显示的数据（英文列表和另一种语言列表）。渲染时默认数据以英文列表显示。

问题是当数据显示在另一种语言列表中时。我点击了，它以另一种语言显示数据（运行良好）。但是当我向后导航时（它再次显示英文数据，这意味着再次加载主屏幕）。

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

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 />
          }
     }
}