Javascript 将自定义组件道具作为参数传递到navigator route中

我从API中获取类别，并尝试通过screenProps将类别作为stack navigator中路由的参数传递。我的类别在数组中。这就是为什么我给它分配了0个数组索引。但它不起作用。它给了我不明确的答案。我手动尝试分配catId=1和title='Filmler'。它工作得很好。正确的方法是什么

type Props = {};
export default class App extends Component<Props> {
  state = {
    cat_list: [],
      error : null,

  }

  async componentWillMount() {
    try {
      const url="https://bilettm.com/api/v1/categories";
      const catsApiCall = await fetch(url);
      const categories = await catsApiCall.json();
      this.setState({cat_list:categories,error:null})
    }catch (err) {
      console.log("Error fetching data-----------", err);
      this.setState({error:err})
    }
  }

  render() {
    // console.warn(this.state.cat_list);

    return (
    <View style={{flex:1,}}>
      <NavigationDrawer screenProps = {this.state.cat_list}/>

    </View>
    );
  }
}



const app = createStackNavigator({
       FromMainScreenToSubCats:{
                    screen:FromMainScreenToSubCats,
                    params: { catId:this.props.screenProps.cats[0].id , title:this.props.screenProps.cats[0].title_tk }
           },
            MainScreeen:{
                screen:MainScreen
            },

            Orders:{
                screen:OrdersScreen
            },
            EventDetail:{
                screen:EventDetailScreen
            },
            Seats:{
                screen:SeatsScreen
            },
            ReviewPay:{
                screen:ReviewPay
            },
            EventsScreen:{
                screen:EventsScreen
            },

            SeatsScreen2:{
                screen:SeatsScreen2
            },
            clientinfo:{
                screen:clientinfo
            },
            clientBankAccountInfo:{
                screen:clientBankAccountInfo
            },
            PaymentScreenViaWebView:{
                screen:PaymentScreenViaWebView
            },
            eventDetailScreenTest:{
                screen:eventDetailScreenTest
            }
            ,


        }
        ,{
    headerMode:false,
    }

        )


export default createAppContainer(app);

type Props={}；
导出默认类应用程序扩展组件{
状态={
类别清单：[]，
错误：null，
}
异步组件willmount（）{
试一试{
常量url=”https://bilettm.com/api/v1/categories";
const catsApiCall=等待获取（url）；
const categories=wait catsApiCall.json（）；
this.setState（{cat_list:categories，error:null}）
}捕捉（错误）{
log（“获取数据时出错------------”，err）；
this.setState（{error:err}）
}
}
render（）{
//console.warn（此.state.cat_列表）；
返回(
);
}
}
const app=createStackNavigator({
从主屏幕到子屏幕：{
屏幕：从主屏幕到子屏幕，
参数：{catId:this.props.screenProps.cats[0].id，标题：this.props.screenProps.cats[0].title_tk}
},
主屏幕：{
屏幕：主屏幕
},
订单：{
屏幕：OrdersScreen
},
事件详情：{
屏幕：EventDetailScreen
},
座位：{
屏风：座椅屏风
},
复习时间：{
屏幕：ReviewPay
},
事件筛选：{
屏幕：EventsScreen
},
座椅屏幕2：{
屏幕：座椅屏幕2
},
客户端信息：{
屏幕：clientinfo
},
客户银行账户信息：{
屏幕：clientBankAccountInfo
},
PaymentScreenViaWebView：{
屏幕：PaymentScreenViaWebView
},
eventDetailScreenTest：{
屏幕：eventDetailScreenTest
}
,
}
,{
headerMode:false，
}
)
导出默认createAppContainer（应用程序）；