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

Question

I am new to react native and am trying to get my button to navigate to the SignUpEmail page. I origianlly had the onPress in the GetStartedButton code but recently tried putting it into the actual welcome.js page considering it can see the navigator from the stack being rendered. I cant seem to figure out how to get my button to direct me to the page I want. Any insight is greatly appreciated! Thank you.

I get the error that it cannot find navigation in line 23 of GetStartedButton.js and it points to the set of parenthesis immediately after 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 <-- Just the button

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 <-- the page where the getstarted button is located

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

Final Output:

Make the following changes:

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>
    );
  }
}

Here is the working Expo Snack Demo .

Answer 2

You have created the stack but not rendered it in App.js. Instead you render Welcome page directly add the created stack to return method:

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>


    )
  }
}