如何在React Native中发送数据?

时间:2018-11-23 21:46:21

标签: react-native react-native-router-flux

如何将数据从屏幕发送到其他人并将其保存在卡中,但我没有找到方法。 我通过导航使用了页脚,而其他按钮则使用了路由器通量。

我尝试了Action.hometab({name:this.state.name})

2 个答案:

答案 0 :(得分:0)

我建议您使用反应导航。这样您就可以传递像这样的道具。

this.props.navigation.navigate('Screen2', {data: 'some-stuff'})

,您可以在其他屏幕上访问数据。

this.props.navigation.state.params('data')

答案 1 :(得分:0)

首页

    import React, { Component } from "react";
import { Container,Content,Button,Input,Item,Form,Textarea,Text} from "native-base";
import styles from "./styles";
import firebase from "firebase";
import { Actions } from 'react-native-router-flux';
import PorsonTab from './PorsonTab'

class NewStr extends Component {

  componentDidMount() {
    var that = this;

    var date = new Date().getDate(); 
    var month = new Date().getMonth() + 1; 
    var year = new Date().getFullYear(); 
    var hours = new Date().getHours(); 
    var min = new Date().getMinutes(); 


    that.setState({ date: date + '/' + month + '/' + year + ' ' + hours + ':' + min, }); }

     test = () => {
      firebase.database().ref().child('users').push(
        { name:this.state.name,story: this.state.story,time2:this.state.date }),
        Actions.sentmsg();
        this.props.navigation.navigate('PorsonTab', {name:this.state.name})

      }


    state = {name: "",story: "",time2:""}

  render() {

    return (
      <Container style={styles.container}>


        <Content padder>
          <Form>
            <Item regular>
              <Input onChangeText = {name => this.setState({name})}  placeholder="عنوان القصة" />
            </Item>
          </Form>
          <Text/>
          <Text/>


          <Textarea onChangeText = {story => this.setState({story})} rowSpan={5} bordered placeholder="محتوى الرسالة يجيب الا تقل عن 100 كلمة" />
            <Text/>
            <Text/>
            <Text/>
            <Text/>
            <Text/>
            <Button block primary style={styles.mb15} 
            onPress={this.test.bind(this)} >
            <Text>نشر</Text>
          </Button>


        </Content>
      </Container>
    );
  }
}

export default NewStr;

第二页

import {Container,Text,Content,Card,CardItem,Body} from 'native-base';
import {Icon} from 'native-base';
import React,  {Component} from 'react';
import styles from "./styles";









export default class PorsonTab extends Component {

    static navigationOptions = {
        tabBarIcon: ({tintColor}) => {
            return < Icon name='md-contacts' style={{color:tintColor}}/>
        }
    }

 render(){

     return(
        <Container style={styles.container }  >
        <Content padder >
             <Card style={styles.mb1} >
            <CardItem  header bordered style={styles.mbitem} >
              <Text  style={{flex:1,textAlign:'center'}}> {this.props.navigation.state.params('name')}</Text>
            </CardItem>

              <Body>
                <Text style={{flex:1,textAlign:'center'}}>
                  1
                </Text>
              </Body>

          </Card>

             </Content>
             </Container>

     );
 }
}