将 onPress 重定向传递给子组件 React Native

Question

I am struggling a little bit. I have tried to create more components for my React native app but after I did it my ButtonSaving stoped redirecting to Dashboard for some reason. I was trying some ways to pass onRowPress to component but without luck. What do I do incorrectly here please?

Login button is working fine => redirecting to Dashboard ButtonSaving not working at all => should redirect to Dashboard

AppNavigator.js

import { createStackNavigator } from 'react-navigation-stack'
import { createAppContainer } from 'react-navigation';
import Homepage from './components/Homepage/Homepage';
import Dashboard from './components/Dashboard/Dashboard';

const AppNavigator = createStackNavigator({

  Homepage: Homepage,
  Dashboard: { screen: Dashboard},
},
{
  initialRouteName: 'Homepage',
  defaultNavigationOptions: {
    headerStyle: {
      backgroundColor: 'white',
      opacity: 70,
      borderBottomColor: 'white',
      borderColor: 'white'
    },
    headerTintColor: 'black',
    headerTitleStyle: {
      fontWeight: 'bold'
    }
  }
}
);

const Container = createAppContainer(AppNavigator);

export default Container;

Homepage.js

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

// COMPONENTS
import ButtonSaving from './ButtonSaving/ButtonSaving';


class Homepage extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      isLoading: false
    },
    this.handleClick = this.handleClick.bind(this);
    this.onRowPress = this.onRowPress.bind(this);
  }

  handleClick() {
    const counterApp = this.state.counter;
    this.setState({
      counter: counterApp + 1,
      dashboard: 'Dashboard'
    })
  }

  onRowPress = ({ navigation }) => {

        this.props.navigation.navigate(this.state.dashboard);
    }



  render() {


    return(
      <View style={styles.container}>
        {/* LOGIN BUTTON */}
        <View style={styles.buttonContainer}>
          <View style={styles.buttonLogin}>
            <Button title="log in"
              color="white"
              onPress={() => this.props.navigation.navigate('Dashboard')}/>
          </View>
        </View>

        {/* LOGO CONTAINER */}
        <View style={styles.logoContainer}>
          <Image
            style={{height: 147, width: 170}}
            source= {require('./REACT_NATIVE/AwesomeProject/logo.png')}
            ></Image>
        </View>

        {/* EXPLAINATION OF WALT */}
        <Text style={styles.textContainer}>Lorem ipsum lorem upsum></Text>

        {/* Needs to be refactored to VIEW */}
        <ButtonSaving onPress={() => this.onRowPress}/>

      </View>)
}

ButtonSaving.js

import React from 'react';
import { StyleSheet, Text, View, Button, Image, TouchableOpacity } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';


class ButtonSaving extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    },
    this.onRowPress = this.onRowPress.bind(this);
  }

  onRowPress = ({ navigation }) => {

        this.props.navigation.navigate(this.state.dashboard);
    }

  render(){

    return(
        <View style={styleButton.container}>
          <LinearGradient
            colors={[
              '#00b38f',
              '#7dcf5a'
            ]}
            style={styleButton.opacityContainer}>
            <TouchableOpacity>
              <Button
                title="Start Saving"
                color='white'
                onPress={this.onRowPress}/>
            </TouchableOpacity>
          </LinearGradient>
        </View>
    )
  }
}


const styleButton = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
    width: '100%',
    height: 50,
    justifyContent: 'center',
    marginTop: '39%'
  },
  opacityContainer: {
    height: 48,
    borderRadius: 25,
    backgroundColor: 'darkgreen',
    width: '70%',
    justifyContent: 'center',
    alignItems: 'center'
  }
})



export default ButtonSaving;

Answer 1

You miss to put dashboard in your state in ButtonSaving.js

In Homepage.js when your are calling handleClick ?. Dunno how you got that working...

Answer 2

You say in the onRowPress this:

this.props.navigation.navigate(this.state.dashboard);

but I don't see anywhere that you set this.state.dashboard.

Probabbly you missed set it up.

Answer 3

There is no point to save "dashboard" in the Homepage state or the ButtonSaving state.

In Homepage.js you don't need to pass onPress to ButtonSaving

 ...
        <ButtonSaving navigation={this.props.navigation}/>
 ...

Next in ButtonSaving.js

  onRowPress = () => {
        this.props.navigation.navigate('Dashboard');
    }

Answer 4

It was simple refactor and this helped!

<ButtonSaving navigation ={this.props.navigation}/>

I will update solution for others later.