Question

我有App.js如下：

import React from 'react';

import Home from "./components/Home";
import Chat from "./components/Chat";

import {
    Router,
    Scene
} from "react-native-router-flux";

import {
  Platform
} from 'react-native';

class App extends React.Component {
    render() {
        return (
            <Router>
                <Scene key="root" style={{paddingTop: Platform.OS === 'ios' ? 64: 54}}>
                    <Scene key="home" component={Home} title="Home" />
                    <Scene key="chat" component={Chat} title="Chat" />
                </Scene>
            </Router>
        );
    }
}

export default App

然后我回家Home.js如下：

import React from "react";

import {
    View,
    Text,
    StyleSheet,
    TextInput,
    TouchableOpacity
} from "react-native";

import {
  Actions
} from "react-native-router-flux";

class Home extends React.Component {
  state = {
    name: ""
  };
    render() {
        return (
            <View>
                <Text style={styles.title}>
                    Enter your name:
                </Text>
                <TextInput
                  style={styles.nameInput}
                  placeholder="John Snow"
                  onChangeText={(text) => {
                    this.setState({
                      name: text
                    });
                  }}
                  value={this.state.name}
                />
            <TouchableOpacity onPress={() => {
                // navigate to the second screen, and to pass it the name
                Actions.chat({
                  name: this.state.name
                });

            }}
            >
              <Text style={styles.buttonText}>
                Next
              </Text>
            </TouchableOpacity>
            </View>
        )
    }
}

var styles = StyleSheet.create({
  title: {
    marginTop: 20,
    marginLeft: 20,
    fontSize: 20
  },
  nameInput: {
    padding: 5,
    height: 40,
    borderWidth: 2,
    borderColor: "black",
    margin: 20
  },
  buttonText: {
    marginLeft: 20,
    fontSize: 20
  }
});

export default Home;

最后我有Chat.js如下：

import React from "react";
import PropTypes from "prop-types";

import {
    View,
    Text
} from "react-native";

class Chat extends React.Component {
    render() {
        return (
            <View>
                <Text>
                    Hello {this.props.name}
                </Text>
            </View>
        )
    }
}

Chat.defaultProps = {
  name: "John"
};

Chat.propTypes = {
  name: PropTypes.string
};

export default Chat;

当我输入一个名字然后点击下一步时，我得到：

Hello chat

即名称不会出现。

我做错了什么？

编辑：

在Home.js中，当我这样做时：

console.log(this.state.name);

我得到了预期的名字。

但是当我这样做时，在chat.js中：

console.log(this.props);

我明白了：

这与输出一致，但我不知道在哪里聊天＆＃39;来自。

Answer 1

使用react-native-router-flux，this.props.name指向场景键的名称。因此，在这种情况下，场景键的名称是App.js中的“chat”。

我相信如果你将Home.js中Actions.Chat中的道具名称更改为与姓名不同的东西，即人物，以及Chat.js中this.props.person的参考人，你应该没事。< / p>

为什么我的变量没有在React Native中正确传递？

1 个答案: