有人可以幫助我解決ReactNavigation螢屏更改問題嗎？

我在讓 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;

uj5u.com熱心網友回復：

在 MainButton.js 檔案中，您沒有處理 onPress 事件。將其添加到可觸摸的不透明度。

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

標籤：javascript 反应原生 反应导航

上一篇：為按鈕設定屬性，但僅在我單擊兩次時才有效

下一篇：在EventSubscriberSymfony3.4上發送回應