我想用React Native中的一个按钮移动屏幕

Question

我想按屏幕上的图像按钮转到另一个屏幕，但我不知道怎么做。我完全是个初学者。我怎样才能转到下一页？

import React, { Component } from 'react'
import { StyleSheet, Text, View, TouchableOpacity,Image,Alert } from 'react-native';
import {} from 'react-navigation';
const ButtonScreen = props => {
const content = (
<View style= {[styles.button]}>
<Image source={require('../assets/icon/룰렛.png')} style={{
transform: [{scale: 0.37}],
}}
/>
</View>
)
return (
<TouchableOpacity  onPress={() => {
Alert.alert('빨리');
}}
>{content}</TouchableOpacity>
)
}
const styles = StyleSheet.create ({
button: {
top: 60,
flexDirection: 'row',
alignItems: 'center',
height: '30%',
width: '100%',
},
})
export default ButtonScreen;

Answer 1

对于react native中的导航，有各种库。react导航、react native router flux和react nativenavigation(wix(是可以用于导航的方法。

react导航是一个著名的导航，它目前有V5.x，后面有完整的文档。它使用JavaScript代码进行导航，我假设您安装了这个库。

react原生路由器flux使用react导航V4.x，它看起来确实像react js中的react路由器dom。但是，由于性能方面的问题，我强烈建议不要使用它。

react原生导航(wix(具有最高的性能，因为它使用原生代码进行导航。然而，它的文档很差，初学者很难使用。

为了使用当前版本的react导航，你需要做的第一步是安装需求，然后你需要有一个单独的文件来定义你的路线。假设您有两个屏幕。该文件看起来像以下代码：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Screen1 from 'the path of Screen1'
import Screen2 from ' the path of Screen2'
const Stack = createStackNavigator();
function Navigation() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Screen1" component={Screen1} />
<Stack.Screen name="Screen2" component={Screen2} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default Navigation

然后您需要在索引文件中导入此文件。

import Navigation from "the path of Navigation";
AppRegistry.registerComponent(appName, () => Navigation);

如果你在按钮屏幕上，你想进入屏幕2，你需要以下代码：

import React, { Component } from 'react'
import { StyleSheet, Text, View, TouchableOpacity,Image,Alert } from 'react-native';
const ButtonScreen = props => {
const content = (
<View style= {[styles.button]}>
<Image source={require('../assets/icon/룰렛.png')} style={{
transform: [{scale: 0.37}],
}}
/>
</View>
)
return (
<TouchableOpacity  onPress={() => props.navigation.navigate("Screen2")}
>{content}</TouchableOpacity>
)
}
const styles = StyleSheet.create ({
button: {
top: 60,
flexDirection: 'row',
alignItems: 'center',
height: '30%',
width: '100%',
},
})
export default ButtonScreen;

这是最简单的导航方式，我建议您阅读文档