React Native:单击按钮时调用视图

Question

我是React Native noob。

我刚刚使用nreact-native-unity-view将Unity3D应用程序与React Native应用程序集成(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中搜索屏幕之间的导航。我一点也听不懂。我需要更深入地了解。

有人能帮忙吗？

Answer 1

最简单的方法是使用堆栈导航器，并为统一屏幕提供一个单独的页面。https://reactnavigation.org/docs/stack-navigator/

导航的代码是navigation。navigation("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>
);
}