Nativeにコンポーネントをフィルタリングする

Question

フィルタリングチェックボックスリストオプションを使用して、フィードに表示するニュースを除外しようとしています。私のアプリはまだデータベースから情報を取得していないので、基本的に手作業で作成してメソッドをテストしています。

私が持っている変数はトピック（州立小道具）であり、feedNews、topicsはユーザーがフィードで見たいトピックを含む配列であり、feedNewsはすべてのニュース要素で表示されますフィード。

トピックの一覧

this.state = { 
    topics: ['News-1','News-2','News-3'] 
} 

feedNews

const feedNews = [ 
    {name:'News-1', comp: <FeedNews key={101} name="News-1" />}, 
    {name:'News-2', comp: <FeedNews key={102} name="News-2" />}, 
    {name:'News-3', comp: <FeedNews key={103} name="News-3" />}, 
    {name:'News-1', comp: <FeedNews key={104} name="News-1" />}, 
    {name:'News-3', comp: <FeedNews key={105} name="News-3" />} 
] 

注コンポーネントの各コンポーネント上のキーだけでテスト基本的に私は私のクラスのレンダリングコンポーネントのフィルタ配列を返す関数を呼び出しているに持っているもの

のためだった。

filterFeedNews(){ 
    let topics = this.state.topics; 
    return feedNews.filter((item) => { 
     return topics.indexOf(item.name)!==-1; 
    }).map(item => item.comp); 
} 

この機能は初めてアプリを開くたびに機能しますが、フィルタオプション（チェックボックスのリスト）を使用してトピック配列を実際に変更すると、消えるオプションがあり、私が選択したオプション。ところで、更新フィルタ機能はこれです：

updateFilter(newsName, value){ 
    let newNewsTopics = this.state.topics; 
    if(value){ 
     newNewsTopics.push(newsName); 
    }else{ 
     newNewsTopics.splice(newNewsTopics.indexOf(newsName),1); 
    } 
    this.props.dispatch(setNewsFilter(newNewsTopics)); 
    this.setState({ 
     newsTopics: newNewsTopics, 
    }); 
} 

この機能は、私の質問は、私は何、である

onClick(){ 
    this.action(this.name, !this.state.value); 
    this.setState({ 
     value: !this.state.value, 
    }); 
} 

（なぜなら小道具の名前の）アクションとして各チェックボックス内のバインドによって呼び出されますこれらの機能に間違っている、またはこれが反応ネイティブで起こるのが普通ですか？

PS：トピックごとに1つのニュースしかない場合は問題ありません。これだけでは動作しませんトピックごとに複数のニュース

UPDATE

があるとき、私はこれが問題であるかどうかわからないんだけど、問題は、フィルタリングのための代わりに、リストビューのScrollViewされている場合と、

だから基本的にメインは、問題はよりRの面でもないフィルタリングレンダリング目的

render(){ 
     return (
      <View style={styles.root}> 
       <Toolbar home={true} options={true} title='Feed' actionOptions={this.optionsAction.bind(this)}/> 
       <View style={styles.flexContainer}> 
        <ScrollView style={styles.flexContainer}> 
         {this.filterFeedNews()} 
        </ScrollView> 
       </View> 
       <View style={styles.spacing} /> 
       {this.options()} 
      </View> 
     ); 
    } 

ソリューションでした。コンポーネントの組み込み。同僚の助けを借りて、上記の投稿の構造をちょっと変えなければなりませんでした。何が変わった ：

const feedNews = [ 
    {name:'News-1', ...otherProps}, 
    {name:'News-2', ...otherProps}, 
    {name:'News-3', ...otherProps}, 
    {name:'News-1', ...otherProps}, 
    {name:'News-3', ...otherProps} 
]; 

は私のフィルタ送り機能が考え

filterFeedNews(){ 
     let topics = this.state.newsTopics; 
     let feed = feedNews.filter((item) => { 
      return topics.includes(item.name); 
     }); 
     const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
     this.setState({dataSource: ds.cloneWithRows(feed)}); 
    } 

の新しい方法に私の更新フィルタを適応させることも同様に変更された私の状態に

dataSource: ds.cloneWithRows(feedNews), 

をデータソースを追加しました行動も変えなければならなかった。

updateFilter(newsName, value){ 
     let newNewsTopics = this.state.topics; 
     if(value){ 
      newNewsTopics.push(newsName); 
     }else{ 
      newNewsTopics.splice(newNewsTopics.indexOf(newsName), 1); 
     } 
     this.props.dispatch(setNewsFilter(newNewsTopics)); 
     this.setState({ 
      newsTopics: newNewsTopics, 
     },() => this.filterFeedNews()); 
    } 

と私のそれは今

<ListView 
     style={styles.flexContainer} 
     dataSource={this.state.dataSource} 
     removeClippedSubviews={false} 
     renderRow={(rowData, sectionID, rowID) => this.renderRow(rowData, sectionID, rowID)} 
     enableEmptySections={true} 
/> 

プロListViewコントロールを持っていScrollViewのではなく、レンダリング：それは私が私の前のアプローチ

コンとしていた問題を抱えていない：私が使用 LayoutAnimationをコンポーネントが更新されるたびにリストビューでは機能しません。フィードのニュースに写真がある場合、ユーザーはフィルタリングのフィードバックしか持っていません。

解決策私はスクロールビューで私の最初のアプローチを維持したい場合はケースでScrollView

を維持することは、私の解決策は、基本的にthis.state.topicsは一方で、構造（文字列の配列）を保持し、この

updateFilter(newsName, value){ 
    let newNewsTopics = this.state.topics; 
    if(value){ 
     newNewsTopics.push(newsName); 
    }else{ 
     newNewsTopics.splice(newNewsTopics.indexOf(newsName), 1); 
    } 
    this.props.dispatch(setNewsFilter(newNewsTopics)); 
    this.setState({ 
     newsTopics: newNewsTopics, 
    }); 
} 

filterFeedNews(){ 
    let topics = this.state.topics; 
    let i = 0; 
    return feedNews.filter((item) => { 
     return topics.includes(item.name); 
    }).map((item) => { 
     return (<FeedNews key={++i} name={item.name}/>); 
    }); 
} 

ましたfeedNewsは、前ののソリューションの上の例のように基本的にオブジェクトの配列になり、フィルタとマップを使用してfilterFeedNews関数で変換され、コンポーネントの配列に変換されます。 ある意味では、結果はListViewとまったく同じです。元のアニメーションは「機能していませんでしたが、実装がどのように行われたのかが原因です。アニメーション

私はそれは私が実際にあるためLayoutAnimationであった上で話をしたすべての問題を引き起こしていた持っていた問題について

ソリューションは、毎回私はレイアウトのアニメーションが終わったフィルタリングオプションでニュースフィードを「削除しました」特定のカテゴリからニュースフィードよりも多くを削除します。

私はLayoutAnimationが問題ではないと思っていたので、私は謝罪しました。私はコードのその部分を投稿しませんでした。この削除の問題が発生しないため、今のソリューションは、このようにすることです

は基本的に、私は削除を入れていない理由を求めている場合は

LayoutAnimation.configureNext({ 
     duration: 300, 
     create: { 
      type: LayoutAnimation.Types.easeInEaseOut, 
      property: LayoutAnimation.Properties.opacity, 
     }, 
     update: { type: LayoutAnimation.Types.easeInEaseOut }, 
    }); 

LayouAnimationにdoesnの削除ので、それが」です私は間違っていないです場合はTのみのiOS

に、Android上でうまく動作ここでも、すべての情報

Answer 1

をかけることなく、あなたの時間を無駄にするために申し訳ありませんが、SETSTATEは直ちに反応して状態を更新しません。ですから、それを防ぐために、次のようにコールバックの関数を呼び出すことをお勧めします：

this.setState({ 
    value: !this.state.value, 
},()=> { 
    this.action(this.name, this.state.value); 
}); 

それは意味がありますか？