React-native导航屏幕-Java 学习之路

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

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

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

在主屏幕中，我有两个选项可以选择要在FlatList（ENGLISH List和Another Language List）上显示的数据 . 渲染时，默认数据显示在英文列表中 .

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

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

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

2 回答

您应该为此当前类型创建 state .

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

回复于 2024-04-29T08:42:35+08:00

0
您可能在 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中 .
回复于 2024-04-29T08:42:35+08:00

React-native导航屏幕

2 回答

相关问题