如何在类react-native之外的箭头函数中获取this.props.navigation

Question

我正在使用TabView renderScene SceneMap

这是代码。

 const FirstRoute = (props) => (
 <View style={[styles.container]}>
   <List containerStyle={{backgroundColor: '#F8F8F8',marginTop:0, borderTopWidth: 0, borderBottomWidth: 0 }}>
     <FlatList
         data={props.guests}
         renderItem={({ item }) => (
         <GuestRow {...item}/>
         )}
         keyExtractor={(item) => item.qr_code}
     />
  </List>
</View>
);



const SecondRoute = (props) => (
<View style={[styles.container]}>
<List containerStyle={{backgroundColor: '#F8F8F8',marginTop:0, borderTopWidth: 0, borderBottomWidth: 0 }}>
  <FlatList
    data={props.activities}
    renderItem={({item,index}) => (

        newProps = {
            item:item,
            index:index
        },

       <TouchableOpacity onPress={() =>this.navigationState.navigation('ActivityDetailScreen')}>
         <ActivityRow {...newProps}/>
       </TouchableOpacity>
    )}
    keyExtractor={(item) => item.activity_id}
  />
</List>
</View>
);

渲染类

export default class EventDetail extends Component{
constructor(props) {
super(props);
this.state = {
  loading: false,
  data: [],
  page: 1,
  error: null,
  refreshing: false,
  index: 0,
  routes: [
    { key: '1', title: 'Tab1', color: '#009688'},
    { key: '2', title: 'Tab2',color: '#3F51B5'},
  ],
 };
}

componentDidMount() {
 this.makeRemoteRequest();
}

makeRemoteRequest = () => {
 const { page } = this.state;
 this.setState({ loading: true });

 fetch('http://api.com', {method: 'POST', headers: {Accept: 'application/json','Content-Type': 'application/json',},

      body: JSON.stringify({
          'eventId':'15',
      })
  })
  .then(res => res.json())
  .then(res => {
    this.setState({
      data: page === 1 ? res["Details"] : [...this.state.data, ...res["Details"]],
      error: res.message || null,
      loading: false,
      refreshing: false
    });
  })
  .catch(error => {
    console.error(error);
    this.setState({ error, loading: false });
  });
};

_renderHeader = props =>{

   <TabBar
    {...props}
    indicatorStyle={{ backgroundColor: 'mediumpurple' }}
   />

};



render() {

  if(!this.state.loading){
      return (
        <View
          style={{
            flex: 1,
          }}>
          <StatusBar
             backgroundColor="mediumpurple"
             barStyle="light-content"/>
          <TabView
            style={styles.container}
            navigationState={this.state}
            renderScene ={SceneMap({
              '1':() =>  <FirstRoute {...this.state.data}/>,
              '2':() =>  <SecondRoute {...this.state.data}/>,
            })}
            renderHeader={this._renderHeader}
            onIndexChange={index => this.setState({ index })}
          />

        </View>
      );

  }else {
    return (
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="large" color="#0000ff" />
        </View>
    );
  }
}
}

未定义是符号导航错误。