Блог

Я использую react-viro для разработки AR-приложения. В основном app.js у меня есть следующий код:

 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;
  

итак, когда я нажимаю на кнопку на главном экране, я перехожу к Piazza_Bra_AR.js это выглядит так:

 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;
  

мне было интересно, как я могу вернуться на свой домашний экран, используя OnClick на вироизображении. По поводу проблемы с github (https://github.com/viromedia/viro/issues/877) говорят, что вы просто делаете, как обычно, в обычном приложении react-native, но я не могу добраться до него.
Как вы можете себе представить, по моим словам, я вообще не разработчик, просто так получилось, что мой друг, который работает над своей диссертацией (он графический), попросил меня помочь ему; это говорит о том, что любая помощь будет действительно оценена, и я предоставлю дополнительную информацию, если потребуется.

NVM это был глупый вопрос… просто отредактировал его следующим образом

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

и затем в Piazza_Bra_AR.js добавлена эта строка прямо под render(){ :

 const { navigation } = this.props;
  

называть это так:

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