StackNavigator this.props.navigation cached

Question

我正在使用一个平面列表，在其中我正在做：

let pressed = () => {
      this.props.navigation.navigate('DetailScreen', {item: item});
    }

然后在 DetailScreen 上的 render（） 中我正在做： this.props.navigation.getParam('item', null)

所以我在列表中单击的第一项，在 DetailScreen 中显示正确的项目，但是如果我返回并单击任何其他项目，那么 this.props.navigation.getParam（'item'， null） 总是返回相同的项目。就像第一次选择后它不会更改一样。

列表.js

_renderRow({item}){
    let pressed = () => {
      this.props.navigation.navigate('Details', {item: item});
    }
    let actualRowComponent =
      <View style={css.list.row}>
        <View style={css.list.rowContainer}>
          <Text style={css.list.rowSymbol}>{item.sym}</Text>
          <Text style={css.list.rowTitle}>{item.title}</Text>
        </View>
        <Button title={"$"+item.amount}
          onPress={pressed}
          backgroundColor='#EE7600'
          buttonStyle={{borderRadius: 5}}
          />
      </View>;

    let touchableWrapperIos =
      <TouchableHighlight
        activeOpacity={0.5}
        underlayColor="#fff"
        onPress={pressed}
      >
        {actualRowComponent}
      </TouchableHighlight>;

    let touchableWrapperAndroid =
      <TouchableNativeFeedback
        useForeground={true}
        background={TouchableNativeFeedback.SelectableBackgroundBorderless()}
        onPress={pressed}
      >
        {actualRowComponent}
      </TouchableNativeFeedback>;
    if (require('react-native').Platform.OS === 'ios') {
      return touchableWrapperIos;
    }
    else return touchableWrapperAndroid;
  }
  render(){
    return (
      <View style={css.baseStyles.baseContainer}>
        <View style={{justifyContent: 'center',alignItems: 'center', marginBottom: 40, marginTop: 50}}>
        </View>
        <SectionWidget title="Items" >
          <FlatList
            style={css.baseStyles.flatListContainer}
            data={this.items}
            renderItem={this._renderRow}
            keyExtractor={(item,index) => item.id.toString()}
          />
        </SectionWidget>
      </View>
    );
  }

细节.js

render(){
    const item = this.props.navigation.getParam('item', null);
    console.log(item.title)
    return (
      <View style={css.baseStyles.container}>
        <ScrollView>
          <View style={{marginTop: 40, marginBottom: 60, flex: 1, justifyContent: 'center',alignItems: 'center'}}>
               <Text style={css.baseStyles.priceText}>${item.amount}</Text>
               <Text style={css.baseStyles.subText}> +$0.50 </Text>
          </View>
          <Divider style={{ backgroundColor: '#ccc', marginLeft: 10, marginRight: 10  }} />
          <View style={{marginTop: 60, marginBottom: 30, flex: 1, justifyContent: 'center',alignItems: 'center'}}>
               <Text style={css.baseStyles.titleText}>{item.title}</Text>
               <Text style={css.baseStyles.descriptionText}>{item.summary}</Text>
          </View>
          <Divider style={{ backgroundColor: '#ccc', marginLeft: 10, marginRight: 10 }} />
        </ScrollView>
        <View style={css.baseStyles.footerContainer}>
          <Button title='Buy'
                backgroundColor='#EE7600'
                buttonStyle={{marginTop: 20, marginBottom: 20, borderRadius: 5, width: 150}}
                />
        </View>
      </View>
    );
  }

Answer 1

由于我以前从未使用过 React Navigation，所以我误解了它的用法。事实上，您的问题似乎是逻辑/用法问题，它有一个简单的解决方案。您的目的是拥有多个详细信息屏幕（我的意思只是一个组件，但堆栈中的多个屏幕），而不仅仅是一个具有不同参数的屏幕。这有很大的不同！React Navigation 提供了一种替代navigation.navigate()方法，该方法navigation.push()，它为导航的"历史记录"添加了一个堆栈，似乎正是您正在寻找的。所以，你要做的是更换

this.props.navigation.navigate('Details', {item: item});

跟

this.props.navigation.push('Details', {item: item});

您可以在官方文档中阅读更多（并更好地解释）。

让我知道这是否符合您的问题。

Answer 2

我发现的问题是由于@autobind。如果你@autobind和反应导航一起使用，你会遇到问题。所以我删除了@autobind，一切都按预期工作。