Блог

Я новичок в React Native.

Я только что интегрировал свое приложение Unity3D с приложением React Native, используя nreact-native-unity-view (https://github.com/nhancv/nreact-native-unity-view )

 const onClick = () => {
   
  }


  return (
      <View  style={{ flex: 1 }}>
          <Text> React Native App</Text>
        <Button style={{ width: '100%' }} title="Open Unity Player" onPress={onClick}/>

      </View>
  );
};
  

Это представление, которое я хочу вызвать в onClick функции

    <View style={{ flex: 1 }}>
            <UnityView
                style={{ flex: 1 }}
                onMessage={onUnityMessage}
                onUnityMessage={onUnityMessage}
            />
          </View>
  

Я попытался выполнить поиск навигации между экранами в React Native. Я ничего не мог понять. Мне нужно углубиться, чтобы понять.

Пожалуйста, кто-нибудь может помочь?

Самый простой способ — использовать навигатор стека и создать отдельную страницу для экрана unity. https://reactnavigation.org/docs/stack-navigator /

код для навигации будет navigation.navigate(‘screenname’); Этот код не будет работать, пока вы не отсортируете импорт, связанный с Unity и связанными элементами.

 import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen({ navigation }) {
  const onClick = () => {
    navigation.navigate('UnityScreen');
  };

  return (
    <View style={{ flex: 1 }}>
      <Text> React Native App</Text>
      <Button
        style={{ width: '100%' }}
        title="Open Unity Player"
        onPress={onClick}
      />
    </View>
  );
}

function UnityScreen({ navigation }) {

  // your other code
  return (
    <View style={{ flex: 1 }}>
      <UnityView
        style={{ flex: 1 }}
        onMessage={onUnityMessage}
        onUnityMessage={onUnityMessage}
      />
    </View>
  );
}

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="UnityScreen" component={UnityScreen} />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyStack />
    </NavigationContainer>
  );
}