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;

我只是在看这里的东西吗？任何帮助都归功于从家里传递道具到聊天组件。

编辑：在我发出警报的聊天组件（this.props.name）时，它会提示你好聊天。来自app组件中的<Scene key='chat' component={Chat} title='Chat' />的密钥正在传递而不是来自home组件的输入值。不知道为什么会发生这种情况

Answer 1

似乎名称是保留行动键的道具，你可以做那样的事情

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

并在您的聊天课程中

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

React Native Prop没有传递给子组件

1 个答案: