React Native中TabNavigator嵌套StackNavigator点击跳转报错问题

问题原因 #

报错核心是两个常见的React Navigation使用错误：

1. 5.x及以上版本的React Navigation已废弃navigation.state.params传参写法，你在FilmDetail中用旧API拿路由参数直接触发报错
2. 路由命名冲突：外层底部Tab的根路由和内层Stack的首页都命名为Search，会导致导航匹配优先级异常
3. 若你给FilmDetail加了Redux的connect高阶组件，默认会过滤掉路由相关的route属性，也会导致参数拿不到

解决步骤 #

1. 替换参数获取写法 #

修改FilmDetail的componentDidMount逻辑，从route.props中拿参数：

componentDidMount() {
  // 替换旧的navigation.state.params写法
  getFilmDetailFromApi(this.props.route.params.idFilm).then(data => {
    this.setState({
      film: data,
      isLoading: false
    })
  })
}

如果拿不到route属性，就用官方兼容高阶组件包裹FilmDetail导出：

// filmdetail.js末尾新增
import { withNavigation } from '@react-navigation/compat';
export default withNavigation(FilmDetail);

如果用了Redux的connect，要在映射参数时保留原生props：

const mapStateToProps = (state, ownProps) => {
  return {
    favoritesFilm: state.favoritesFilm,
    ...ownProps // 保留navigation、route等原生路由属性
  }
}

2. 修改路由命名避免冲突 #

调整内层Stack的首页命名，不要和外层Tab路由重名：

function MyStack() {
  return (
    <Stack.Navigator>
      {/* 将name改为SearchStack和外层Tab的Search区分开 */}
      <Stack.Screen name="SearchStack" component={Search}  options={{title:'Rechercher'}}/>
      <Stack.Screen name="FilmDetail" component={FilmDetail}  />
    </Stack.Navigator>
  );
}

内容的提问来源于stack exchange，提问作者Ilyass El