[TabView] Reproduire dynamiquement un array

Version imprimable

Bonjour à tous,

Alors avant tout, je ne suis pas un expert avec React Native mais je me débrouille bien :)

Je dois afficher des graphiques dans une vue. J'ai trouvé une tab-view très bien et j'ai réussi à l'utiliser de manière "statique"

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import { TabView, SceneMap, TabBar } from 'react-native-tab-view';
 const routes = [
      { key: 'first', title: 'Un', icon:'temperature-full' },
      { key: 'second', title: 'Deux', icon:'angle-right' },
      { key: 'third', title:'??', icon:'angle-left'},
    ];
const renderScsene = {
      //first: FirstRoute,
      first: () => <View style={[{ backgroundColor: 'white' }]}>
        <Charts data={[{value: 10}, {value: 6}, {value: 3}, {value: 11}]} />
      </View>,
      second: () => (<Charts style={{marginTop:20}} data={[{value: 15}, {value: 12}, {value: 4}, {value: 9}]} />),
      third: () => (<View style={[{marginTop:20}]}>
        <Charts data={[{value: 5}, {value: 12}, {value: 4}, {value: 9}]} />
      </View>),
    };
// ...
<TabView
          commonOptions={{
            icon: ({ route, focused, color }) => (
              <FontAwesome name={route.icon} size={22} color={color} />
            ),
          }}
          navigationState={{ index, routes }}
          //indicatorStyle={{ backgroundColor: 'white' }}
          style={{ flex:1,backgroundColor: 'green' }}
          renderTabBar={prop => <TabBar 
            {...prop} 
            inactiveColor={colors.grayMedium}
            activeColor={colors.greenDark}
            //renderTabBarItem={pr=>(<Text style={{color:'red'}}>{pr.labelText}</Text>)}
            indicatorStyle={{ backgroundColor: colors.greenDark}}
            style={{backgroundColor: 'white'}} // Bar container
            //tabStyle={{backgroundColor: 'white'}} // tab br
 
            />}
          renderScene={SceneMap(renderScsene)}
          onIndexChange={setIndexTab}
        />

(je ne détail pas <Chart data={} />, car ce n'est pas la source de mon problèke. Du moins, pas pour le moment :) )

Selon la station que je sélectionne, je peux avoir 2,3,4,5 graphiques donc je dois construire dynamiquement routes et renderScsene, et là je bug, ... et je pense que je vais encore plus buger sur renderScsene :)

Voilà ce que j'essaye de faire avec route:
Je dois donc reconstruire selon cette structure

Code:

1
2
3
4
5
const routes = [
      { key: 'first', title: 'Un', icon:'temperature-full' },
      { key: 'second', title: 'Deux', icon:'angle-right' },
      { key: 'third', title:'??', icon:'angle-left'},
    ];

Toutes mes données sont dans dasaset et cette partie fonctionne très bien

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  const dataset = new Array()     
  measures?.map((d,i) => {
    dataset.push( {
      // Comment below when adapted
      title: {
        title: d.datasets?.label,
        fontawesome: d.sensor_type_awe,
      },
      // Comment above when adapted
      label: d.datasets?.label,
      fontawesome: d.sensor_type_awe,
      data: [d.datasets?.data],
      id_sensor: d.id_sensor,
    })
  })

Problème 1
J'essaye donc de faire comme cela.
Mes console.log() affichent bien ce que je veux pousser dans routes
Ci-dessous, le routes.push à fonctionné avec un petit message d'erreur parce que key doit être unique.
Puis j'ai eu le message d'erreur: "Element type is invalid: expected a string..."
Puis j'ai décommenté la troisième ligne mais j'ai le même message d'erreur.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 const routes:any = []
dataset?.map((d,i) => {
 
      //routes.push({key:'first',title:'un',icon:'temperature-full'})
      routes.push({key: 'd.id_sensor', title: 'd.label', icon:'temperature-full'})
      //routes.push({key: d.id_sensor.toString(), title: d.label.toString(), icon:'temperature-full'})
 
      console.log(i)
      console.log('\tkey:' + d.id_sensor)
      console.log('\ttitle:' + d.label)
      console.log('\ticon' + d.fontawesome)
 
    })

Je me demande si je m'y suis bien pris, notamment dans la déclaration de const routes:any = []

Je continue à chercher de mon côté, mais si vous pouviez m'apporter un bon départ, ca serai super sympa

Problème 2
Après, ca sera encore plus compliqué car les key retourne une fonction :oops:, pour constrire renderScsene...

Code:

1
2
3
4
5
6
7
8
9
10
const renderScsene = {
      //first: FirstRoute,
      first: () => <View style={[{ backgroundColor: 'white' }]}>
        <Charts data={[{value: 10}, {value: 6}, {value: 3}, {value: 11}]} />
      </View>,
      second: () => (<Charts style={{marginTop:20}} data={[{value: 15}, {value: 12}, {value: 4}, {value: 9}]} />),
      third: () => (<View style={[{marginTop:20}]}>
        <Charts data={[{value: 5}, {value: 12}, {value: 4}, {value: 9}]} />
      </View>),
    };

J'espère que vous ne abandonerez pas :D

Ok, j'ai compris ce qui générait l'erreur. Elle était liée au condition d'utilisation de React Native Tab View.
Ceci dit, je ne suis pas convaincu de la propreté de la première partie de mon code.

J'explique ou était le problème.

J'ai montré que pour que React Native Tab View. fonctionne, il faut (et)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const routes = [
      { key: 'first', title: 'Un', icon:'temperature-full' },
      { key: 'second', title: 'Deux', icon:'angle-right' },
      { key: 'third', title:'??', icon:'angle-left'},
    ];
 
const renderScsene = {
      //first: FirstRoute,
      first: () => <View style={[{ backgroundColor: 'white' }]}>
        <Charts data={[{value: 10}, {value: 6}, {value: 3}, {value: 11}]} />
      </View>,
      second: () => (<Charts style={{marginTop:20}} data={[{value: 15}, {value: 12}, {value: 4}, {value: 9}]} />),
      third: () => (<View style={[{marginTop:20}]}>
        <Charts data={[{value: 5}, {value: 12}, {value: 4}, {value: 9}]} />
      </View>),
    };

Il faut que dans renderScsene, on retrouve les key dans routes (first, second, third) C'est ce qui permets de faire le lien entre les tab et les contenus (des tab).

Evidement, si je commence à "dynamiser" routes sans me préoccuper de renderScsene, ca va buger.

Ceci fonctionne bien donc

Code:

1
2
3
 dataset?.map((d,i) => {
      routes.push({key:d.id_sensor,title:d.label,icon:d.fontawesome})
    })

Si on prend PROVISOIREMENT ceci (Evidemment, 1,4 et 14, c'est du debuggage)

Code:

1
2
3
4
5
6
7
8
9
10
const renderScsene = {
      //first: FirstRoute,
      1: () => <View style={[{ backgroundColor: 'white' }]}>
        <Charts data={[{value: 10}, {value: 6}, {value: 3}, {value: 11}]} />
      </View>,
      4: () => (<Charts style={{marginTop:20}} data={[{value: 15}, {value: 12}, {value: 4}, {value: 9}]} />),
      14: () => (<View style={[{marginTop:20}]}>
        <Charts data={[{value: 5}, {value: 12}, {value: 4}, {value: 9}]} />
      </View>),
    };

Par contre maintenant j'ai un autre gros problème.

Si je peux construire route de cette manière

Code:

1
2
3
4
5
 
const routes:any = []
 dataset?.map((d,i) => {
      routes.push({key:d.id_sensor,title:d.label,icon:d.fontawesome})
 })

Comment je peux faire de même avec renderScene, sachant que le modèle est le suivant

Code:

1
2
3
4
5
6
7
8
9
  const renderScene = {
      first: () => <View style={[{ backgroundColor: 'white' }]}>
        <Charts data={[{value: 10}, {value: 6}, {value: 3}, {value: 11}]} />
      </View>,
      second: () => (<Charts style={{marginTop:20}} data={[{value: 15}, {value: 12}, {value: 4}, {value: 9}]} />),
      third: () => (<View style={[{marginTop:20}]}>
        <Charts data={[{value: 5}, {value: 12}, {value: 4}, {value: 9}]} />
      </View>),
    };

et SURTOUT que first, second et third doit correspondre à la valeur de d.id_sensor (s'il y trois interractions (3 capteurs)).
Exemple:

Code:

1
2
3
4
5
6
7
8
9
  const renderScene = {
      1: () => <View style={[{ backgroundColor: 'white' }]}>
        <Charts data={[{value: 10}, {value: 6}, {value: 3}, {value: 11}]} />
      </View>,
      4: () => (<Charts style={{marginTop:20}} data={[{value: 15}, {value: 12}, {value: 4}, {value: 9}]} />),
      14: () => (<View style={[{marginTop:20}]}>
        <Charts data={[{value: 5}, {value: 12}, {value: 4}, {value: 9}]} />
      </View>),
    };

J'ai essayé ceci sans aucun succès

Code:

1
2
3
4
5
6
7
8
9
10
11
 
const routes:any = []
const renderScene:any = []
dataset?.map((d,i) => {
      routes.push({key:d.id_sensor,title:d.label,icon:d.fontawesome})
 
      renderScene.push({
        d.id_sensor +': ()=> <View>'+d.label+'</View'
      })
 
})

1 pièce(s) jointe(s)

Harch, j'ai finalement réussi à faire mon truc :)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
const routes:any = []
const renderScene:any = []
dataset?.map((d,i) => {
      //routes.push({key:d.id_sensor,title:d.label,icon:d.fontawesome})
      routes.push({key:d.id_sensor,icon:d.fontawesome})
 
      renderScene[d.id_sensor] = () => (
        <View style={{marginTop:10}}>
          <View style={{backgroundColor:'white'}}>
            <Charts data={d.data} />
          </View>
          <View style={{marginVertical:10}}>
 
            <ScrollView style={styles.scrollView}>
              {d.data?.map((v:any) => {
                  return (
                      <Row style={styles.sectionDetailRow}>
                        <ThemedText variant="body" style={styles.sectionDetailItem}>{v.date}</ThemedText>
                        <ThemedText style={styles.sectionDetailItem}> <FontAwesome name={'arrow-right'} size={10} color={colors.greenDark} /></ThemedText>
                        <ThemedText variant="bodyItalic" style={styles.sectionDetailItem}>{v.value}</ThemedText>
                      </Row>
                  )
                } 
              )}
            </ScrollView>
 
          </View>
        </View>
      )

Je me demande si je peux faire plus élégent? Ca fonctionne, mais je ne suis pas très sûre de la propreté

Pièce jointe 666772

Merciii