如何通过反应原生导航传递参数

Question

Index.js

<View>
  <TouchableOpacity
    onPress={() => this.props.navigation.navigate('Product', { select: 1 })}
  >
    <Text>navigate</Text>
  </TouchableOpacity>
  <TouchableOpacity
    onPress={() => this.props.navigation.push('Product', { select: 1 })}
  >
    <Text>push</Text>
  </TouchableOpacity>
</View>

Product.js

componentDidMount() {
  console.log(this.props.navigation.state.params);
  // when navigate, returns null
  // when push, returns Object { "select": 1 }
}

---

从索引导航到产品时，我想传递一个参数：select。

当我使用navigation.push() 时，Product 会收到参数。

但我不想使用push，因为我不想在这里添加屏幕。

Answer 1

我知道这不是您要寻找的答案，但我认为您可以考虑一下。

让 Product.js 作为 Index.js 的一部分怎么样？如下：

<View>
 { !productVisibilty ? <TouchableOpacity
     onPress={() => this.setState({productVisibality: true})}}
  >
    <Text>navigate</Text>
  </TouchableOpacity>
  <TouchableOpacity
    onPress={() => this.props.navigation.push('Product', { select: 1 })}
  >
    <Text>push</Text>
  </TouchableOpacity>
: <Product />
</View>