Question

我正在制作一个应用程序，但我仍然只制作了启动画面。但是，我想知道如何在可触摸的不透明单击上导航到下一个屏幕。我不想通过为页面创建特定功能进行导航。我想通过导入页面进行导航。

我在下面显示了我的代码。

import React from 'react';
import { Image, StyleSheet, TouchableOpacity, Text, View } from 'react-native';

import { AppLoading } from 'expo';
import { useFonts } from 'expo-font';

const src2 = {
  uri: "https://o.remove.bg/downloads/e6dc1218-7a94-4c86-a3b9-6baed9ee6c63/images-removebg-preview.png"
}

const src = {
  uri: "https://o.remove.bg/downloads/7ce84ac7-f275-434c-a294-11a8b2e56e2b/pngtree-halo-victory-light-effect-png-image_1727940-removebg-preview.png"
}

function Levels({ navigation }) {
  return (
    <levels />
  );
}

export default props => {
    
  let [fontsLoaded] = useFonts({
    'Sketch 3D': 'https://dafonttop.com/wp-data/s/870/1870/file/sketch-3d.regular.otf',
  });
  if (!fontsLoaded) {
    return <AppLoading />;
  } else {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>My app</Text>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonText}>Start</Text>
        </TouchableOpacity>
      </View>
    );
  }
};

const styles =  StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#CFA240",
    alignItems: "center",
    justifyContent: "center",
  },
  title: {
    fontFamily: "Sketch 3D",
    fontSize: 50,
    color: "#fff",
    position: "absolute",
    top: 150
  },
  glow: {
    position: "absolute",
    top: 45,
    left: 20,
    width: 200,
    height: 200,
  },
  mop: {
    top: 45,
    left: 10,
    height: 225,
    width: 225,
  }, 
  images: {
    position: "absolute",
    top: 220,
  },
  button: {
    position: "absolute",
    bottom: 150,
    padding: 15,
    borderRadius: 16,
    borderColor: "#fff",
    borderWidth: 2,
    backgroundColor: "#CFA240",
    borderStyle: "dashed",
    elevation: 10,
  },
  buttonText: {
    fontFamily: "Sketch 3D",
    color: "#fff",
    fontSize: 25,
  }
})

PS，我必须通过导入文件进入下一个屏幕

谢谢。

Answer 1

     <TouchableOpacity
        onPress={() => this.props.navigation.navigate('Home')}>
             <Text>GO TO HOME</Text>
     </TouchableOpacity>

如何导航到TouchableOpacity的下一个屏幕，请单击

1 个答案: