React Nativeの永続状態：AsyncStorageから設定状態がコンポーネントを更新しません。

Question

コンポーネントで永続化状態を取得しようとしています。

コンソールログを使用すると、AsyncStorageが値を保存してロードしているように見え、その値が正しくストリング/解析されているように見えます。

状態は、ストレージからロードされた値に基づいて正しく更新されるようにも見えます。

ただし、<SegmentedControlTab>のコンポーネントは正しく表示されませんselectedIndex;常に0になるか、手動で状態に割り当てたものがデフォルトになります。私は間違っているつもりです

import React, { Component } from 'react'; 
import { Text, ScrollView, AsyncStorage } from 'react-native'; 
import SegmentedControlTab from 'react-native-segmented-control-tab'; 


class Home extends Component { 

    state = { 
    //units: 1 //0=metric, 1=Imperial, 2=cups 
    }; 

    componentDidMount =() => { //Load unit setting 
     AsyncStorage.getItem('units').then((value) => { 
     if (JSON.parse(value) === 0 || JSON.parse(value) === 1 || JSON.parse(value) === 2) { 
      this.setState({ units: JSON.parse(value) }); 
     } 
     console.log('Value loaded: ', JSON.parse(value)); 
     console.log('State: ', this.state.units); 
     }); 
    } 

    render() { 
    return (
     <ScrollView> 
     <Text style={{ marginTop: 20, fontSize: 20 }}>Settings and that.</Text> 
     <SegmentedControlTab 
      values={['Metric', 'Imperial', 'Cups']} 
      // tabStyle={{ borderColor: styleBackground }} 
      // activeTabStyle={{ backgroundColor: styleBackground, borderColor: styleBackground }} 
      selectedIndex={this.state.units} 
      onTabPress={async (event) => { 
      try { 
       await AsyncStorage.setItem('units', JSON.stringify(event)); 
      } catch (error) { 
       console.log('Some kind of terrible error'); 
      } 
      this.setState({ units: event }); 
      console.log('Current state unit: ', this.state.units); 
      }} 
     /> 
     </ScrollView> 
    ); 
    } 
} 

export default Home; 

任意の提案：私は一度状態が<SegmentedControlTab>が自動的selectedIndexはこれを反映するために更新してしまうことcomponentDidMount機能で更新されることを期待しましたか？

Answer 1

これは、サードパーティのコントロールが期待どおりに動作しない場合のようです。 React Nativeの<SegmentedControlIOS>コントロールは、上記のコードで（期待どおり）動作します。私は<SegmentedControlTab>で遊ぶ必要があると思いますか、代替案を探す必要があります。