ネイティブプロップが子コンポーネントに渡されないようにしてください

Question

反応ネイティブルータフラックスをルータとして使用しています。これはホーム画面とチャット画面がある、初めての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; 

が、私は単にオーバーここで何かを探していますチャットコンポーネント？任意のヘルプは、家庭からチャットコンポーネントに小道具を渡すことに感謝しています。

編集： チャットコンポーネントでは、警告（this.props.name）するとハローチャットに警告します。ホームコンポーネントの入力値の代わりに、アプリケーションコンポーネントの<Scene key='chat' component={Chat} title='Chat' />のキーが渡されています。なぜこれが

Answer 1

が起こっていることを確認名前がアクションキーのために予約された小道具であるように、あなたがその

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

とチャットクラスであると思われるコードを読み取る

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