有人可以帮我解决 React Navigation 屏幕更改问题吗？

Question

我在让 React Navigation 实际转换屏幕时遇到问题。我以前用过它，但这次我无法弄清楚我的问题是什么。我单击我的按钮，但没有发生任何转换。我认为这可能是内联 onPress 的问题，而不是运行...它必须在主按钮中吗？或者 App.js 上的内联代码是否会覆盖 MainButton.js.

中的任何内容

此外...NarScreen 是我要访问的屏幕。

文件 1：App.js

import 'react-native-gesture-handler';
import React from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { color } from 'react-native-reanimated';
import MainButton from './components/MainButton';
import NarScreen from './screens/NarScreen.js'

function HomeScreen({ navigation }) {
  return(
      <View style={styles.background}>
        <View style={styles.logo}>
          <Image source={require('./components/HNS1.png')} style={styles.image} resizeMode='contain' />
        </View>
        <View style={styles.buttons}>
        <MainButton onPress={() => navigation.navigate('Nar')}>NAR Test</MainButton>
        <MainButton>Tripoli Test</MainButton>
        </View>
      </View>
   
  );
}

function Nar({ navigation }) {
  return(
   <NarScreen />
  )
}


const Stack = createStackNavigator();

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

}

const styles = StyleSheet.create({
  background: {
    backgroundColor: '#00629B',
    flex: 1,
  },
  buttons: {
    marginTop: "20%",
    marginLeft: 10,
  },
  image: {
    width: '80%',
    height: 300,
    borderRadius: 20,
  },
  logo: {
    borderRadius: 200,
    marginTop: '30%',
    alignItems: 'center'
  },
  });


  export default App;

文件 2：NarScreen.js

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

const NarScreen = props => {
    return(
        <View>
            <Text>BigScreen!</Text>
        </View>
    )
}
export default NarScreen;

文件 3：MainButton.js

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

const MainButton = props => {
    return <TouchableOpacity>
        <View style={styles.button}>
            <Text style={styles.buttonText}>{props.children}</Text>
        </View>
    </TouchableOpacity>
}

const styles = StyleSheet.create({
    button: {
        backgroundColor: "#FCD757",
        paddingVertical: 30,
        paddingHorizontal: 30,
        height: 100,
        width: 300,
        marginTop: "10%",
        borderRadius: 10,
        marginLeft: '12%',
        justifyContent: 'space-between',
        
    },
    buttonText: {
        color: 'black',
        fontSize: 26,
        textAlign: 'center',
        
    }

})

export default MainButton;

Answer 1

在您的 MainButton.js 文件中，您没有处理 onPress 事件。将其添加到可触摸的不透明度。

const MainButton = props => {
    return <TouchableOpacity onPress={props.onPress}>
        <View style={styles.button}>
            <Text style={styles.buttonText}>{props.children}</Text>
        </View>
    </TouchableOpacity>
}

有人可以帮我解决 React Navigation 屏幕更改问题吗？

Can someone help me with a React Navigation screen change problem?

javascript

react-native

react-navigation