I need to print the user's name in the drawernavigation but the data is in the state as I access it?

Navigation
1

I need to print the name of a user in the drawer navigation part but I have the data saved in the state but I do not know how to access them and probe passing props and passing the argument but I still do not get anything.

The problem is that it is all in a .js here I attach my code

Here is where I have saved the data 

  export default class index extends Component{
  constructor(props){
  super(props)
  this.state={
     uid:'',
     email:'',
     Nombre:''
  }
 }

And here is my declaration of drawernavigation 

const RootDrawer = DrawerNavigator({
Home:{screen: Home},
Perfil:{screen: Perfil},
Cursos:{screen:Cursos}

},{
  drawerBackgroundColor:'#F64747',

  contentOptions:{
    activeTintColor: 'black',
    activeBackgroundColor: '#eeeeee',
    inactiveTintColor :'white'
  },

  contentComponent: (props) => (
       <Container>
        <View style={styles.drawerHeader}>
        <ImageBackground source={require('./../images/material-design-4k.jpg.png')}  style={{flex:1}}>   
           <Body>
        <Image
          style={styles.drawerImage}
           source={require('./../images/user.png')} />
        <Text style={styles.texto}>
        </Text>
         AQUI ES DONDE QUIERO IMPRIMIR EL DATO 
        <Text  style={styles.texto}>
          Correo
        </Text>
        </Body>
      </ImageBackground>
      </View>
      <Content>

        <DrawerItems {...props} />
      </Content>

    </Container>

  )
})
    
asked by JUAN ALVARES 28.05.2018 в 01:30
source

1 answer

0

This session information can be obtained either by storing it in localstorage or if you use an architecture like Redux taking it from the global state.

Below is an example of how to achieve it with redux.

in your userActions, js: 

  export const login = (loginData) =>
        (dispatch, getState, restApi) =>
            new Promise((resolve, reject) =>
                restApi(null)
                    .then((client) => {
                        client.apis.user.userLogin({loginData: loginData})
                            .then(response => {
                                return resolve(dispatch(setAuthorizationData({
                                    isLoggedIn: true,
                                    authorizationData: response.obj.responseContent
                                })));
                            })
                    })
            );

That function triggers an action that modifies the state of Redux (setAuthorizationData) 

const setAuthorizationData = (data) => ({
    type: AUTHORIZATION,
    data
});

This action is intercepted by a reducer: 

const authorizationReducer = createReducer(initialState,
    {

        [AUTHORIZATION](state, action) {
            return {
                ...state,
                isLoggedIn: action.data.isLoggedIn,
                authorizationData: action.data.authorizationData,
            };
        },


    });

export default authorizationReducer;

And finally you have your container bindeado to the state of redux, by which you can access by means of props to those data after loaded. Note that I access this.props.accountData.name from the container because it is binded to the redux state. 

class SideBar extends Component {

    render = () =>
     <Container>
        <View style={styles.drawerHeader}>
        <ImageBackground source={require('./../images/material-design-4k.jpg.png')}  style={{flex:1}}>   
           <Body>
        <Image
          style={styles.drawerImage}
           source={require('./../images/user.png')} />
        <Text style={styles.texto}>
        </Text>
        {this.props.accountData.nombre}
        <Text  style={styles.texto}>
          Correo
        </Text>
        </Body>
      </ImageBackground>
      </View>
      <Content>

        <DrawerItems {...props} />
      </Content>

    </Container>


}


export default connect(state => ({
    isLoggedIn: state.authorizationReducer.isLoggedIn,
    accountData: state.customerReducer.accountData,
    isAccountDataLoaded: state.accountReducer.isAccountDataLoaded,
}), dispatch => Binding.bindActionCreators(Binding.ActionCreators, dispatch))(SideBar);

On how to initialize the store, binderar components to Redux and integrate this with react-navigation I recommend you follow these tutorials:

  • Binding with redux: link
  • Integration with react-navigation and redux: link

Both guides are quite clear.

    
answered by 28.05.2018 в 03:29
Focus an item when iterating over the I have to enter the username and password twice to enter the system