reactjs - Navigation.push 不会从路由渲染新参数

Question

嗨，我有一个列表和列表详细信息页面。

在详细信息页面中，我获得了其他详细信息页面的链接。因为它们是相同的组件。我正在使用 navigation.push 转到另一个详细信息页面。

details a -> details b

问题是当我按下链接按钮时。我希望 React native 会重新渲染 details 组件route-params。但我不会发生。它仍然向我展示旧的细节。有人可以看看吗

const CaseDetails = ({route, navigation}) => {
  const scrollRef = useRef();

  const {
    title,
    summary,
    gallery,
    image,
    challenge,
    solution,
    result,
  } = route.params;

  const caseList = useSelector((state) => state.articlesReducer.caseList);

  const listToRender = caseList.filter((item) => item.title !== title);

  const renderItem = ({item}) => {
    return (
      <TouchableOpacity
        key={item.id}
        onPress={() => {
              navigation.push('CaseDetails', {
            screen: 'CaseDetails',
            params: {
              title: item.title,
              summary: item.summary,
              image: item.image,
              challenge: item.challenge,
              solution: item.solution,
              result: item.result,
              gallery: item.gallery,
            },
          });
        }}>
        <View style={styles.sliderContainer}>
          <Image
            style={styles.sliderImage}
            source={{
              uri: `${baseUri}/${item.image}`,
            }}
          />
        </View>
      </TouchableOpacity>
    );
  };



  return (
    <ScrollView ref={scrollRef}>
      <View style={globalStyle.articleLandingContainer}>
        <Image
          style={globalStyle.articleLandingImage}
          source={{
            uri: `${baseUri}/${image}`,
          }}
        />
        <View style={globalStyle.articleLandingOverlay}></View>
        <Text style={styles.landingText}>{title}</Text>
        <Text style={styles.landingPara}>{summary}</Text>
      </View>

      <View style={{paddingHorizontal: 12}}>
        <Text style={styles.contentTitle}>Challenge</Text>
        <Text style={styles.contentPara}>{challenge}</Text>
      </View>

      <Carousel data={gallery} generateFor="cases" />

      <FlatList
        style={styles.bottomMargin}
        data={listToRender}
        horizontal
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
      />
    </ScrollView>
  );
};

When I using navigation.push 请注意，当我 console.log 时 route.params 它只会向我显示 的参数DetailsA，它永远不会更新为detailsBor detailsC。

更多笔记

我正在从 listpage 进入详细信息页面。事情就是这样list page，details pages得到了不同的堆栈。

这是代码

const CasesStackScreen = createMyStackNavigator(
    'Customer Cases',
    Cases,
    'CasesStack',
);
const CaseDetailsStackScreen = createMyStackDetailsNavigator(
    'Case Details',
    CaseDetails,
    'CaseDetailsStack',
    'Case Details',
);


// My DIY Stack Creator
const createMyStackNavigator = (name, screen, whatStack) => ({navigation}) => {
    whatStack = createStackNavigator();
    return (
        <whatStack.Navigator
            screenOptions={{
                headerStyle: {backgroundColor: `${headerColor}`},
                headerTintColor: '#fff',
            }}>
        </whatStack.Navigator>
    );
};

// cart button && Go back previous Screen
const createMyStackDetailsNavigator = (
    name,
    screen,
    whatStack,
    destination,
) => ({navigation}) => {
    whatStack = createStackNavigator();
    return (
        <whatStack.Navigator
            screenOptions={{
                headerStyle: {backgroundColor: `${headerColor}`},
                headerTintColor: '#fff',
            }}>
            
        </whatStack.Navigator>
    );
};

标签： reactjsreact-nativereact-navigation