代码之家 › 专栏 › 技术社区 › Roger

StackNavigator this.props.navigation已缓存

react-native

Roger · 技术社区 · 6 年前

我正在使用平面列表,在其中我正在做:

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

this.props.navigation.getParam('item', null)

因此,我在列表中单击的第一个项目在DetailScreen中显示了正确的项目,但是如果我返回并单击任何其他项目,那么这个.props.navigation.getParam('item',null)总是返回相同的项目。在第一次选择之后,它似乎不会被更改。

_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>
    );
  }

Detail.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>
    );
  }

2 回复 | 直到 6 年前

Milore 6 年前

因为我以前从未使用过React导航,所以我误解了它的用法。事实上,您的问题似乎是一个逻辑/用法问题,它有一个简单的解决方案。您的意图是拥有多个细节屏幕(我的意思是只是一个组件,但堆栈中有多个屏幕),而不仅仅是一个具有不同参数的屏幕。这有很大的不同!React导航提供了一种替代方法 navigation.navigate() ,即 navigation.push() ,这为导航的“历史”添加了一个堆栈,并且似乎正是您要查找的内容。所以,你要做的是替换

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

具有

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

你可以在官方网站上读到更多(更好的解释) doc .

让我知道这是否适合你的问题。

Roger 6 年前

我发现的问题是由于@autobind引起的。如果将@autobind与react导航一起使用,您将遇到问题。所以我删除了@autobind,一切都正常工作。