Question

我在反应原生中使用Drawer Navigator。

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

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

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

问题是当数据显示在另一种语言列表中时。我点击了，它显示了另一种语言的数据（工作正常）。但是当我向后导航时（它再次显示英文数据，这意味着再次加载了Homescreen）。

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

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

Answer 1

您可能在selectedLanguage中使用HomeScreen状态在语言列表之间切换。卸载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 />
          }
     }
}

React-native导航屏幕

2 个答案: