react-native redux state组件

时间:2018-01-23 15:30:20

标签: reactjs react-native react-router react-redux

大家好我在我的行动中有这个功能

export function chooseContact(){
 ContactsWrapper.getContact().then((contact) => { //opens stock phone 
 address book
 var phone = contact['phone']; // retrieves phone number from picked 
 contact
 global.phoneDemo = phone; //initializes to the global var in order to 
 access from anywhere
})

在全局变量中成功存储联系人的电话号码后,我在渲染视图方法中使用它

import React, {Component} from 'react';
import {KeyboardAvoidingView,TouchableOpacity, View, Switch, StyleSheet, Dimensions, TextInput, Image} from 'react-native';
import {InputGroup, Input, Icon, Button, Text} from 'native-base';
import {withState, compose, withHandlers} from 'recompose';
import {connect} from 'react-redux';
import {log} from 'ramdasauce';
import {memoize} from 'ramda';
import {pay, chooseContact} from '../actions';
import uzs from '../format-uzs';
import usd from '../format-usd';
import {merchantProps} from '../selectors';
import FitImage from "react-native-fit-image";
import fee from '../fee';
import ContactsWrapper from 'react-native-contacts-wrapper';

 const Merchant  = ({

  merchant,
  value: {client},
  onClientChange,onSubmit}) => (


  <View style={styles.container}>

    <Input
        keyboardType={merchant.operator ? 'phone-pad': 'default'}
        maxLength={length}
        value={client}/>    
        <Icon name="ios-contacts" style={styles.addressBook} onPress={chooseContact}/>      
    <Button block style={styles.button} onPress={onSubmit}>Оплатить</Button>
  </View>

);   

export default compose(    

  connect(merchantProps, {pay, chooseContact}),

  withState('value', 'setValue',
    ({ route: {params: {client}}}) => ({

      client: global.phoneDemo, //This is how I setting the value, it appears after re-navigating to any activity and returning back})),
  withHandlers({


    onClientChange: props => client =>
      props.setValue({...props.value, client}),     

    onSubmit: props => () =>
      props.pay(
        props.merchant.operator
          ? clean(props.value.client)
          : trim(props.value.client),

  })

)(Merchant);

除了将电话号码存储在全局变量中之后,一切都很好我可以在输入上自动设置它,如果我重新导航到另一个组件并再次返回,那时只有输入自动填充其他方式否。如何在选择接触后自动设置它。

0 个答案:

没有答案