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 typescript : Sélectionner tout - Visualiser dans une fenêtre à part
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 typescript : Sélectionner tout - Visualiser dans une fenêtre à part
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 typescript : Sélectionner tout - Visualiser dans une fenêtre à part
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 typescript : Sélectionner tout - Visualiser dans une fenêtre à part
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 , pour constrire renderScsene...
Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
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