拡張可能なテキスト要素でフルテキストが正しく表示されない

Question

私は、クリックで拡大してより多くのテキストを表示し、クリックで折りたたんでタイトル以外のすべてを非表示にするパネルを構築するチュートリアルを理解しようとしています。

iOSシミュレータを実行すると、パネルが初期化され、すべてのテキストが表示されます。パネルの1つを折りたたんで開き直すと、最初の2行のテキストしか表示されず、残りのテキストをスクロールして表示することもできません。それを再び折りたたむと、折りたたみアニメーションを開始する前に、パネルが正しいサイズに再初期化され、すべてのテキストが表示されているように見えます。

私は問題がトグルであると思いますが、アニメーションがパネルを正しい高さに拡張していない理由はわかりません。

class Panel extends Component{ 
constructor(props){ 
    super(props); 

    this.state = { 
     title  : props.title, 
     expanded : true, 
     animation : new Animated.Value() 
    }; 
} 

toggle(){ 
    let initialValue = this.state.expanded? this.state.maxHeight + this.state.minHeight : this.state.minHeight, 
     finalValue  = this.state.expanded? this.state.minHeight : this.state.maxHeight + this.state.minHeight; 

    this.setState({ 
     expanded : !this.state.expanded 
    }); 

    this.state.animation.setValue(initialValue); 
    Animated.spring(
     this.state.animation, 
     { 
      toValue: finalValue 
     } 
    ).start(); 
} 

_setMaxHeight(event){ 
    this.setState({ 
     maxHeight : event.nativeEvent.layout.height 
    }); 
} 

_setMinHeight(event){ 
    this.setState({ 
     minHeight : event.nativeEvent.layout.height 
    }); 
} 

render(){ 
    let icon = this.icons['down']; 

    if(this.state.expanded){ 
     icon = this.icons['up']; 
    } 

    return (
     <Animated.View 
      style={[styles.container,{height: this.state.animation}]}> 
      <View style={styles.titleContainer} onLayout={this._setMinHeight.bind(this)}> 
       <Text style={styles.title}>{this.state.title}</Text> 
       <TouchableHighlight 
        style={styles.button} 
        onPress={this.toggle.bind(this)} 
        underlayColor="#f1f1f1"> 
        <Image 
         style={styles.buttonImage} 
         source={icon} 
        ></Image> 
       </TouchableHighlight> 
      </View> 

      <View style={styles.body} onLayout={this._setMaxHeight.bind(this)}> 
       {this.props.children} 
      </View> 

     </Animated.View> 
    ); 
} 
} 

Answer 1

あなたはreact-native-accordion助けるかもしれないこのパッケージを参照してください。施設のこの種を提供反応ネイティブパッケージを使用することができます。