2016-10-06 2 views
0

RNを初めて使用していて、ログに記録されたユーザー状態に基づいてリスト内のアイテムを表示/非表示しようとしています。React native:ログに記録されていないユーザーの状態に基づいてListViewからアイテムを削除します。

ログアウト時にアイテムを非表示にするという目標は達成されましたが、ログイン部分にはまだ問題があります。

私は反応性ネイティブエレメント、特にSideMenuコンポーネントを使用しています。

私は以下のように2つの配列を作成しました。ここで

は私の配列である:

レンダリングで
var listLogged = [ 
    { 
    name  : 'Page 1' 
    }, 
    { 
    name  : 'Page 2' 
    }, 
    { 
    name  : 'Logout' 
    }]; 

var listNotLogged = [ 
    { 
    name  : 'Page 1' 
    }, 
    { 
    name  : 'Page 2' 
    }]; 

if (this.state.LoggedIn) { 
<List> 
{ 
listLogged.map((item, j) => (
    <ListItem 
    key={j} 
    title={item.name} 
    /> 
)) 
} 
</List> 
} else { 
<List> 
{ 
    listNotLogged.map((item, j) => (
    <ListItem 
    key={j} 
    title={item.name} 
    /> 
    )) 
} 
</List> 

しかし残念ながら、私はどこでどのように状態を設定するかわからない、主な問題は、Menuコンポーネントがすでにあるということですログイン前にレンダリングされます。

いくつかのヘルプに希望!あなたの<List />コンポーネントがReact Componentの内部にある場合は、状態を変更するためにthis.setState({ LoggedIn: true })を使用することができ、かつrender()機能が自動的に再実行されます事前

答えて

3

でいただきありがとうございます。

「ログイン」ボタンをタップすると状態が変更され、render()が新しい状態で再実行され、別の結果が生成されることがわかりました。 Logoutをタップすると、背中の状態を切り替えることができます:

import React, { Component } from 'react'; 
import { List, ListItem, SideMenu, Button } from 'react-native-elements'; 

const list = [ 
    { name: 'Page 1', onPress: null }, 
    { name: 'Page 2', onPress: null } 
]; 

class Example extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { LoggedIn: false }; 
    } 

    toggleLoggedInState =() => { 
    this.setState({ LoggedIn: !this.state.LoggedIn }); 
    } 

    render() { 
    let button; 
    if (this.state.LoggedIn) { 
     list.push({ name: 'Logout', onPress: this.toggleLoggedInState }); 
     button = <Button title="Log In" onPress={this.toggleLoggedInState} />; 
    } 

    const items = list.reduce((array, item) => { 
     array.push(
     <ListItem 
      key={j} 
      title={item.name} 
      onPress={item.onPress) 
     /> 
    ); 
     return array; 
    }, []); 

    return (
     <SideMenu> 
     <List> 
      {items} 
     </List> 
     {button} 
     </SideMenu> 
    ) 
    } 
} 

export default Example; 

をあなたが他の場所の状態を変更すると、このビューの応答を持っているしたい場合は、ボンネットの下にreduxのようなものを使用したほうが良いと思います。それはあなたのアプリケーション全体のための基盤となるstateを与えます。

+0

残念ながら私はこの問題を抱えています: 'array.push()'は関数ではありません。 – Mark

+1

@マーク私はコードを更新しました... 'reduce()'関数の最後に空の配列を渡していませんでした。 – chandlervdw

+0

ありがとうございました! – Mark

関連する問題