React native Prop pas en cours de transmission à la composante enfant

Question

J'utilise react-native-router-flux en tant que routeur. Ceci est ma toute première application RN dans laquelle j'ai un écran d'accueil, et un écran de discussion. Mon écran d'accueil fonctionne correctement et je parviens à accéder à l'écran de discussion en appuyant sur le bouton. Cependant, mon écran d'accueil a une forme suffisante et la valeur que l'utilisation entre (nom) Je veux passer à l'écran de discussion comme un accessoire.

App principale composante

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; 

composant Accueil

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; 

si j'alerter this.state.value sur la fonction onPress(), la valeur est capturée et alertés.

Cependant,

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

n'est pas RECEVOIR cette valeur d'entrée. Lorsque l'application va à l'écran de chat, il dit juste « bonjour »

composante Chat

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; 

Suis-je simplement sur la recherche quelque chose ici? toute aide est appréciée en passant de l'accessoire de la maison au composant de chat.

modifier: Dans le composant de chat lorsque je alerte (this.props.name) il alerte Hello chat. La clé de <Scene key='chat' component={Chat} title='Chat' /> dans le composant de l'application est transmise au lieu de la valeur d'entrée du composant home. Je ne sais pas pourquoi cela se passe

Answer 1

semble comme le nom est accessoire réservé pour la touche d'action que vous pouvez faire quelque chose comme ça

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

et dans votre classe de chat

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