使用 react-navigation/native 返回 Home 堆栈

Question

I'm using react-viro to develop an AR app. In the main app.js i have the following code:

var arScenes = {
  'Campidoglio_AR': require('./js/Campidoglio_AR/Campidoglio_AR'),
  'Piazza_Bra_AR': require('./js/Piazza_Bra_AR/Piazza_Bra_AR'),
}

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Questa è la schermata iniziale</Text>
      <Text>Premi il bottone sottostante per visitare Piazza Bra</Text>
      <Button
        title="Piazza Bra"
        onPress={() => navigation.navigate('Piazza Bra')}
      />
  );
}

function Piazza_Bra_AR({ navigation }) {
  return (
    <ViroARSceneNavigator
      initialScene={{
        scene: arScenes['Piazza_Bra_AR'],
      }} />
    );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen options={{headerShown: false}} name="Piazza Bra" component={Piazza_Bra_AR} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

so when i click on the button in the home screen i navigate to Piazza_Bra_AR.js that looks like this:

export default class Piazza_Bra_AR_Scene extends React.Component {
  constructor() {
    super();

    this.state = {
      showSceneItems : false,
    }

    this._getInfoControls = this._getInfoControls.bind(this);
    this._onBackClick = this._onBackClick.bind(this);
    this._onBackgroundPhotoLoadEnd = this._onBackgroundPhotoLoadEnd.bind(this);
  }

  render() {
    return (
      <ViroARScene style={styles.container}>
      <ViroSkyBox source={{
                 nx:require('./res/Skybox/negx.png'),
                 px:require('./res/Skybox/posx.png'),
                 ny:require('./res/Skybox/negy.png'),
                 py:require('./res/Skybox/posy.png'),
                 nz:require('./res/Skybox/negz.png'),
                 pz:require('./res/Skybox/posz.png')}}
                 onLoadEnd={this._onBackgroundPhotoLoadEnd}/>

        <LoadingSpinner visible={!this.state.showSceneItems} position={[0, 0, -5]}/>
        <ViroImage source={nastro_azzurro} onClick={() => navigation.navigate('Home')} /> //here i want to navigate 
        {this._getInfoControls()}

      </ViroARScene>
    );
 }

  _getInfoControls() {
    return (
      <ViroNode
        opacity={0}
        animation={{
          name : "fadeIn",
          run : this.state.showSceneItems,
          loop : false,
        }} >

        <InfoElement url={arena_url} tipo_struttura={monumento} content={arena} event_content={event_arena} contentCardScale={[1,1,1]} position={polarToCartesian([-5, 220, -15])}/>
        <InfoElement url={initimissimi_url} tipo_struttura={negozio} content={intimissimi} event_content={event_intimissimi} contentCardScale={[1,1,1]} position={polarToCartesian([-8, 184, -5])}/>
        <InfoElement url={lv_url} tipo_struttura={negozio} content={lv} contentCardScale={[1,1,1]} event_content={event_lv} position={polarToCartesian([-7, 170, -5])}/>
        <InfoElement url={cinema_rivoli_url} tipo_struttura={tempo_libero} content={cinema_rivoli} event_content={event_cinema_rivoli} contentCardScale={[1,1,1]} position={polarToCartesian([-6, 62, -5])}/>
        <InfoElement url={piazza_url} tipo_struttura={tempo_libero} content={piazza} contentCardScale={[1,1,1]} event_content={event_piazza} position={polarToCartesian([-6, -23, -5])}/>
        <InfoElement url={comune_url} tipo_struttura={monumento} content={comune} contentCardScale={[1.5,1.5,1.5]} event_content={event_comune} position={polarToCartesian([-7, -65, -10])}/>
      </ViroNode>
    );
  }
  _onBackgroundPhotoLoadEnd() {
    this.setState({
      showSceneItems:true
    });
  }
}

module.exports = Piazza_Bra_AR_Scene;

i was wondering how could i go back to my home screen by using an OnClick on a ViroImage. On a github issue ( https://github.com/viromedia/viro/issues/877 ) it's said that u just do how u normally would on a plain react-native app but i can't get to it. As u can imagine for my words i'm not a developer at all, it just happens that a friend of mine that is working on his thesis (he is a graphic) ask'd me to help him out; that said any help would be really appreciated and i'll provide further information if neeeded.

Answer 1

NVM that was a stupid question... just edited it like this

function Piazza_Bra_AR({ navigation }) {
  return (
    <ViroARSceneNavigator
      initialScene={{
        scene: arScenes['Piazza_Bra_AR'],
        passProps: { navigation },
      }} />
    );
}

and then in the Piazza_Bra_AR.js added this line just under render(){ :

const { navigation } = this.props;

to call it like this:

onClick={() => navigation.navigate('Screen_name')}