Question

我正在使用FlatList，并且正在其中进行操作：

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

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

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

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

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

Answer 1

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

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

使用

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

您可以在官方doc上了解更多（更好的解释）。

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

Answer 2

我发现的问题归因于@autobind。如果将@autobind与react-navigation一起使用，则会遇到问题。所以我删除了@autobind，一切都按预期运行。

StackNavigator缓存了this.props.navigation

2 个答案: