aksonov / aksonov/react-native-tabs

How to use it with react-native-router-flux?

Ouverte
#27 6 commentaires 3 réactions 0 personnes assignées Voir sur GitHub
Langage dominant
JavaScript
Étoiles
727
Forks
112
Métriques de merge des PR
Aucune PR mergée en 30 j

Description

Hello,

quite new to the react scene and I am struggling to understand some flow...

I have an index page where I registered all the scenes, as suggested on the router-flux docs:

```
const scenes = Actions.create(











);
```

And then I call

```
return (

);
```

in my redner method... works fine...

but then on the page
TraineeDetails I have a Tabbar on the top... and I would like to display content from the assigned components

The code in my TraineeDetails:

```

/**
* Trainee details
*/
'use strict';

import React, { Component } from 'react';
import { StyleSheet, View, StatusBar, Image } from 'react-native';

import Icon from 'react-native-vector-icons/MaterialIcons';
import Tabs from 'react-native-tabs';
import Config from '../../constants/Config';

import {Actions} from 'react-native-router-flux';

class TraineeDetails extends Component {

constructor(props, context) {
super(props, context);
this.state = {
tab: 'today'
};
}

componentDidMount(){
StatusBar.setBackgroundColor(screenConfig.primaryColor, true);
}

goBack(){
Actions.Trainees();
}

onSelectTab(el){
console.log('PROPS: ', el.props);
console.log('NAME: ', el.props.name);
console.log('VIEW: ', el.props.view);

//Actions[el.props.view]({data:this.props.data});

this.setState({tab: el.props.name});
this.setState({tabContent: el.props.view});
}

render() {

const Player = this.props.data;
return (










{/* NEED THE TAB CONTENT HERE */}



);
}
}
// ..... and so on

```

How do I insert the component and re-render it each time the tab is tapped?

In your example you just change a variable and text on the same scene... would be helpful if you could add a container and change the content (loaded dynamically from a component)

Guide de contribution

Aucun guide de contribution indexé pour ce dépôt

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.