react-native - 在 react native 中评估 props 时，未定义不是一个对象

Question

所以我将一些数据传递到我在点击事件上导航的页面

render(){
     const goToPageTwo = () => Actions.gray({text:"hello"});
return(
    </View>
    <Button onPress={goToPageTwo} title="Checkout" color="#841584"/>
      </View>
);
}

现在在我的其他组件中，如果我将其作为 Prop 访问

this.props.text

它给出了一个异常，说 props 未定义

请指导如何解决 谢谢!

更新:

正在访问 this.props 的代码

   import React, { Component } from 'react';
import { Actions } from 'react-native-router-flux'; // New code
import {
  StyleSheet,
  Text,
  Alert,
  View
} from 'react-native';

const GrayScreen = () => {


  return (
      <View style={styles.container}>
      <Text style={styles.welcome} onPress={() => Actions.black()}>{this.props.text}</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'gray',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: 'blue',
  },
});

export default GrayScreen;

路由组件代码

import React, { Component } from 'react';
import { Button } from 'react-native';
import Archives from './components/Archives.js';
import ScarletScreen from './components/ScarletScreen.js';
import GrayScreen from './components/GrayScreen.js';
import Zaika from './components/Zaika.js';

    import {Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component';
    import {
       Alert,Platform,
      StyleSheet,
      Text,
      View,TextInput,Keyboard
    } from 'react-native';
    import NavBar, { NavGroup, NavButton, NavButtonText, NavTitle } from 'react-native-nav';
    import { Router, Scene } from 'react-native-router-flux';
    import App1 from './App1.js';


    const instructions = Platform.select({
      ios: 'Press Cmd+R to reload,\n' +
        'Cmd+D or shake for dev menu',
      android: 'Double tap R on your keyboard to reload,\n' +
        'Shake or press menu button for dev menu',
    });

    export default class App extends Component<{}> {



      render() {



        return (

             <Router>
          <Scene key="root">
                  <Scene
          key="zaika"
              component={Zaika}
              title="Delhi zaika"
              initial
            />
                 <Scene key="app1"
              component={App1}
              title="app1"

            />
            <Scene key="scarlet"
              component={ScarletScreen}
              title="Scarlet"

            />
            <Scene {...this.props}  
              key="gray"
              component={GrayScreen}
              title="Gray"

            />

          </Scene>


        </Router>


        );
      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
      },
      instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
      },
        head: { height: 40, backgroundColor: '#f1f8ff' },
      text: { marginLeft: 5 },
      row: { height: 30 }
    });

Answer 1

您不会拥有 React Stateless Functional Component 的实例属性 props .

props 将作为第一个参数传入:

const GrayScreen = (props) => {    
  return (
      <View style={styles.container}>
      <Text style={styles.welcome} onPress={() => Actions.black()}>{props.text}</Text>
    </View>
  )
}