React Native Prop 没有传递给子组件

Question

我使用react-native-router-flux作为路由器。 这是我的第一个 RN 应用程序，其中有一个主屏幕和一个聊天屏幕。 我的主屏幕工作正常，按下按钮后我能够成功导航到聊天屏幕。 但是，我的主屏幕有足够的形式和用户输入的值（名称）我想作为道具传递给聊天屏幕。

主要应用组件

import React, { Component } from 'react';
import Home from './components/Home';
import Chat from './components/Chat';

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

class App extends Component {
  render() {
    return (
      <Router>
        <Stack key='root'>
          <Scene key='home' component={Home} title='Home' />
          <Scene key='chat' component={Chat} title='Chat' />
        </Stack>
      </Router>
    )
  }
}

export default App;

主页组件

import React, { Component } from 'react';

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

import {
  Actions,
} from 'react-native-router-flux';

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
    }
  }
  render() {
    return (
      <View>
        <Text style={styles.title}>
          Enter your name:
        </Text>
        <TextInput
          style={styles.nameInput}
          placeholder='why so serious??'
          onChangeText={(text) => {
            this.setState({name:  text})
          }}
          value={this.state.name}
        />
        <TouchableOpacity
          onPress={() => {
            Actions.chat({
              name: this.state.name,
            })
          }}
          >
          <Text style={styles.buttonText}>
            Next
          </Text>
        </TouchableOpacity>
      </View>
    )
  }
}

const 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;

如果我在 onPress() 函数上提醒 this.state.value，该值将被捕获并提醒。

然而，

Actions.chat({
              name: this.state.name,
            })
          }}

未收到此输入值。 当应用程序进入聊天屏幕时，它只会说“你好”

聊天组件

import React, { Component } from 'react';

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

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

export default Chat;

我只是在这里看东西吗？ 将道具从家传递到聊天组件时，任何帮助都值得赞赏。

编辑：在聊天组件中，当我 alert(this.props.name) 时它会提醒你好聊天。 应用组件中<Scene key='chat' component={Chat} title='Chat' />的键被传递下来，而不是来自 home 组件的输入值。 不知道为什么会这样

Answer 1

似乎 name 是 action key 的保留道具，你可以做类似的事情

Actions.chat({
   userName: this.state.name,
  })

在你的聊天课上

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