React Native Stack navigator - onPress 到另一个页面

Question

我是本机反应的新手，我正在尝试让我的按钮导航到 SignUpEmail 页面。我最初在 GetStartedButton 代码中有 onPress，但最近尝试将其放入实际的welcome.js 页面，因为它可以从正在渲染的堆栈中看到导航器。我似乎无法弄清楚如何让我的按钮将我引导到我想要的页面！非常感谢任何见解！谢谢。

我在 GetStartedButton.js 的第 23 行收到错误消息，它在 onPress 之后立即指向括号集

App.js

import React, { Component } from 'react';
import { StyleSheet, Text, View, Button} from 'react-native';
import WelcomePage from './src/pages/Welcome';
import SignUpEmailPage from './src/pages/SignUpEmail'

import {createStackNavigator} from '@react-navigation/stack';

const Stack = createStackNavigator();


export default class App extends Component {
 
  createHomeStack = () =>
  <Stack.Navigator>
    <Stack.Screen name="Welcome" component= {Welcome}/>
    <Stack.Screen name="SignUpEmail" component= {SignUpEmail}/>
  </Stack.Navigator>
 
  render() {
    return (
      <View style={styles.welcomeScreen}>
       <WelcomePage/>
      </View>


    )
  }
}

const styles = StyleSheet.create({
  welcomeScreen: {
    flex: 1,
    backgroundColor: 'black'  
  },
  signupemailScreen: {
    flex: 1,
    backgroundColor: '#272933' 

  }
}
);

GetStartedButton.js

import React, { Component } from 'react';
import { StyleSheet, Text, TouchableOpacity, Animated  } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

export default class GetStartedButton extends Component {
  
    constructor(props) {
      super(props)
  
      this.fadeAnimation = new Animated.Value(0)
    }
    componentDidMount() {
        Animated.timing(this.fadeAnimation, {
          toValue: 1,
          duration: 5000,
          useNativeDriver: true,      
        }).start()
      }

    render(){
        return(
        <Animated.View style={[styles.container, { opacity: this.fadeAnimation}]}>
        <TouchableOpacity onPress={() => this.props.navigation.navigate('SignUpEmail')} >
            <LinearGradient   
                 
            colors={['#DB004C','#FC008E']}
            style={styles.linearGradient}
            start={{ x: 0, y: 0.5 }}
            end={{ x: 1, y: 0.5 }}
            >
              
                <Text style={styles.text}>
                    Get Started
                </Text>     
               
             </LinearGradient>
        </TouchableOpacity>
        </Animated.View>
    )
    
}
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        
    },
    linearGradient: {
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 10,
        width: 340,
        padding: 20,
    },

    text: {
        color: 'white',
        fontSize: 20,
        justifyContent: 'center',
    alignItems: 'center',
    }
});

Welcome.js

import { createStackNavigator } from '@react-navigation/stack';
import React, { Component } from 'react';
import { StyleSheet, Text, View, Animated, TouchableOpacity} from 'react-native';
import GetStartedButton from '../components/GetStartedButton';



export default class WelcomePage extends Component {
  
  constructor(props) {
    super(props)

    this.fadeAnimation = new Animated.Value(0)
  }

  componentDidMount() {
    Animated.timing(this.fadeAnimation, {
      toValue: 1,
      duration: 5000,
      useNativeDriver: true,      
    }).start()
  }
  
  render() {
    return (
        <View style={styles.containerMain}>
        <View style={styles.containerClub}>
        <Animated.Text style={[styles.title, { opacity: this.fadeAnimation}]}>Word</Animated.Text>
        </View>
        
      <View style={styles.containerCaption}>   
        <Animated.Text style={[styles.caption, { opacity: this.fadeAnimation}]}> words words words  </Animated.Text> 
      </View>
          
      <View style={styles.containerBottom}>   

        
      
          <GetStartedButton/>
         
        

        
      </View>
    </View>

    );
    }
}



const styles = StyleSheet.create({
    containerMain: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'black',
    },

containerClub: {
    position: 'absolute',
    bottom: 288
  },

  containerCaption: {
    position: 'absolute',
    bottom: 250

  },
  /* To style the button and positioning*/
  containerBottom: {
    
    position: 'absolute',
    bottom: 100
  },
  /* To style "Word"*/
  title: {
    color: 'white',
    fontSize: 35,
    fontWeight: "bold",

  },
  /* To style "Words words words"*/
  caption:
  {
   color: 'white',
    fontSize: 16
  },
  line: {
    borderWidth: 0.5,
    borderColor:'black',
     margin:10,
  }
}
)

Answer 1

最终输出：

进行以下更改：

App.js：

import React, { Component } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import WelcomePage from './WelCome';
import SignUpEmailPage from './Signup';

const Stack = createStackNavigator();

export default class App extends Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Welcome" component={WelcomePage} />
          <Stack.Screen name="SignUpEmail" component={SignUpEmailPage} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

Welcome.js：：

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Animated,
  TouchableOpacity,
} from 'react-native';
import GetStartedButton from './GetStartedButton';

export default class WelcomePage extends Component {
  constructor(props) {
    super(props);

    this.fadeAnimation = new Animated.Value(0);
  }

  componentDidMount() {
    Animated.timing(this.fadeAnimation, {
      toValue: 1,
      duration: 5000,
      useNativeDriver: true,
    }).start();
  }

  render() {
    return (
      <View style={styles.containerMain}>
        <View style={styles.containerClub}>
          <Animated.Text
            style={[styles.title, { opacity: this.fadeAnimation }]}>
            Word
          </Animated.Text>
        </View>

        <View style={styles.containerCaption}>
          <Animated.Text
            style={[styles.caption, { opacity: this.fadeAnimation }]}>
            words words words
          </Animated.Text>
        </View>

        <View style={styles.containerBottom}>
          <GetStartedButton
            onPress={() => this.props.navigation.navigate('SignUpEmail')}
          />
        </View>
      </View>
    );
  }
}

GetStartedButton.js：

import React, { Component } from 'react';
import { StyleSheet, Text, TouchableOpacity, Animated } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

export default class GetStartedButton extends Component {
  constructor(props) {
    super(props);

    this.fadeAnimation = new Animated.Value(0);
  }
  componentDidMount() {
    Animated.timing(this.fadeAnimation, {
      toValue: 1,
      duration: 5000,
      useNativeDriver: true,
    }).start();
  }

  render() {
    return (
      <Animated.View
        style={[styles.container, { opacity: this.fadeAnimation }]}>
        <TouchableOpacity
          onPress={() => {
            this.props.onPress();
          }}>
          <LinearGradient
            colors={['#DB004C', '#FC008E']}
            style={styles.linearGradient}
            start={{ x: 0, y: 0.5 }}
            end={{ x: 1, y: 0.5 }}>
            <Text style={styles.text}>Get Started</Text>
          </LinearGradient>
        </TouchableOpacity>
      </Animated.View>
    );
  }
}

这是工作的Expo Snack Demo。

Answer 2

您已创建堆栈但未在 App.js 中呈现它。相反，您渲染欢迎页面直接将创建的堆栈添加到返回方法：

export default class App extends Component {
 
  createHomeStack = () =>
  <Stack.Navigator>
    <Stack.Screen name="Welcome" component= {Welcome}/>
    <Stack.Screen name="SignUpEmail" component= {SignUpEmail}/>
  </Stack.Navigator>
 
  render() {
    return (
      <View style={styles.welcomeScreen}>
       {this.createHomeStack()}
      </View>


    )
  }
}