在同一条路线上用我的抽屉传递参数时更新屏幕 React Native

Question

我有一个问题，就像我在标题中所说的那样，我的抽屉里有一个 collection 的列表，我想传递他们的 ID 以转到“文章”屏幕并获得一个列表有了新的获取。它可以毫无问题地与我的第一选择一起使用。但是如果我想使用另一个 collection，屏幕不会自行刷新。新列表只有在我手动刷新时才会显示。这是一些可以帮助您的代码： // 我的抽屉内容，我映射了我所有的文件：

  {file.map((f, i) =>
            <DrawerItem
              key={f.id}
              icon={({ color, size }) => (
                <Icon
                  name='description'
                  size={size}
                  color={color}
                />
              )}
              label={f.name}
              onPress={() => {  navigation.navigate('Articles', { screen : 'Articles', params : {id :  f.id}})}}
            />
          )

// 我的文章屏幕，我正在使用我的 collection 的 ID 获取列表：

async componentDidMount() {
let token =  await AsyncStorage.getItem('jeton')

this.setState({
  token : token
})
const { id } = this.state.route.params;

const url = `http://10.1.0.248/api/1/collections/${id}/types`
  fetch(url, {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      "Accept": "application/json",
      "Authorization": "Bearer" + this.state.token,
    },
  }).then(response => response.json()).then((types) => {

    this.setState({
      isLoaded: true,
      files: types
    }) 
  })

}

这是我的导航器组件：

const StackArticles = createStackNavigator();
const StackListe = createStackNavigator();
const Drawer = createDrawerNavigator();

const ArticlesStack = () => (
 <StackArticles.Navigator headerMode='none' initialRouteName="Articles">
  <StackArticles.Screen name='Articles' component={ListArticles} />
  <StackArticles.Screen name='Pdf' component={PdfView} />
  </StackArticles.Navigator>
);

const ListeStack = () => (
  <StackListe.Navigator headerMode='none' initialRouteName="Liste">
    <StackListe.Screen name='Liste' component={Liste} />
    <StackListe.Screen name='Pdf' component={PdfView} />
 </StackListe.Navigator>
);



const DrawerNavigator = (props) => (
 <Drawer.Navigator drawerContent={(props) => <DrawerContent {...props} />}   initialRouteName="Home">
<Drawer.Screen name='Home' component={HomeScreen}
  options={{
    swipeEnabled: false, // to disable swipe gesture for a specific page(s)
  }} />

<Drawer.Screen name='Articles' component={ArticlesStack}
  options={{
    swipeEnabled: false, // to disable swipe gesture for a specific page(s)
  }} />

<Drawer.Screen name='Liste' component={ListeStack}
  options={{
    swipeEnabled: false,
  }} />

<Drawer.Screen name='Settings' component={Settings}
  options={{
    swipeEnabled: false,
  }} />

 </Drawer.Navigator>
)

我进行了一些搜索，但我找到了一些使用过时方法的答案，例如 ComponentWillReceiveProps 或者一些旧版本的 react-navigation （我用的是 5）。因此，如果有人有想法，那可能真的很棒。提前致谢。

Answer 1

所以我用 ComponentDidUpdate 和条件 if(this.props.route.params !== prevProps.route.params) 以及我的 fetch 方法解决了这个问题。我想避免这种情况，但我没有找到任何其他解决方案..

在同一条路线上用我的抽屉传递参数时更新屏幕 React Native

Update screen when passing param with my drawer on the same route React Native

react-native

react-navigation