Native Requisite wird nicht an die untergeordnete Komponente übergeben

Question

Ich verwende react-native-router-flux als Router. Dies ist meine allererste RN-App, in der ich einen Home-Bildschirm und einen Chat-Bildschirm habe. Mein Startbildschirm funktioniert einwandfrei, und ich kann erfolgreich auf den Chat-Bildschirm nach dem Drücken der Taste navigieren. Allerdings hat mein Startbildschirm eine ausreichende Form und der Wert, den die Verwendung gibt (Name) möchte ich als Prop auf den Chat-Bildschirm übergeben.

Haupt App Komponente

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; 

Startseite Komponente

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; 

wenn ich this.state.value auf der onPress() Funktion alarmieren, wird der Wert erfasst und alarmiert wird. Jedoch

,

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

nicht recieving diesen Eingabewert. Wenn die App auf die Chat-Bildschirm geht nur sagt, es „Hallo“

Chat Komponente

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; 

Bin ich hier etwas suchen einfach vorbei? jede Hilfe wird geschätzt, wenn man Prop von Zuhause nach Chat-Komponente geht.

bearbeiten: In der Chat-Komponente, wenn ich alarmiere (this.props.name) es Alarm Hallo Chat. Der Schlüssel von <Scene key='chat' component={Chat} title='Chat' /> in der App-Komponente wird anstelle des Eingabewerts von der Home-Komponente übergeben. Nicht sicher, warum dies geschieht

Answer 1

scheint wie Name reservierte Stütze für Aktionstaste ist man so etwas

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

und in Ihrer Chat-Klasse

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