2017-09-17 3 views
0

私は最初の画面でサーバから読み込まれたものを持っています。残りのタブ画面にそれらを渡したいと思います。しかし、私はオンラインでの例は見つけていません。私はscreenPropsについて知っていますが、どのように設定するのか分かりません。私が試したすべての方法は、エラーに終わった。TabNavigatorのナビゲーションナビゲーションパスの小道

const EProj = TabNavigator({ 
    Home: { screen: HomeScreen }, 
    Map: { screen: MapG }, 
    Login: { screen: Login }, 
    Profile: { screen: Profile }, 
}, { 
    tabBarPosition: 'bottom', 
    animationEnabled: true, 
    tabBarOptions: { 
    activeTintColor: '#1abc9c', 
    }, 
}); 

これは私の画面設定です。 screenPropsはどこに配置すればよいですか?

<EProj 
    screenProps={cats} 
/> 

これを設定するための良い例が参考になります。前もって感謝します。

のホームスクリーンのセットアップ:

class HomeScreen extends React.Component { 
    static navigationOptions = { 
    tabBarLabel: 'Home', 
    }; 

... 

    componentWillMount(){ 
    console.log("Starting to load assets from server!"); 
    this.onLoadCats(); /*starts asset loading*/ 
    } 

    render() { 
    return (
     <View style={styles.container}> 

     <Text>Welcome to alpha 1.17 This is hard system test.</Text> 
     <AssetsLoad catsL={this.state.catsL} /> 
     </View> 
    ); 
    } 
} 

答えて

1

何ができるかは、そのナビゲーションを返すことができ、より高いコンポーネントを作成し、データをロードし、screenProps

を通してそれを渡すことができcomponentDidMountそのコンポーネントで例

const EProj = TabNavigator({ 
    Home: { screen: HomeScreen }, 
    Map: { screen: MapG }, 
    Login: { screen: Login }, 
    Profile: { screen: Profile }, 
}, { 
    tabBarPosition: 'bottom', 
    animationEnabled: true, 
    tabBarOptions: { 
    activeTintColor: '#1abc9c', 
    }, 
}); 

class MainNavigation extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {cats: []}; 
    } 
    componentDidMount() { 
    this.onLoadCats().then((cats) => this.setState({ cats: cats })); 
    } 
    render() { 
    return(<EProj screenProps={{ cats: this.state.cats}} /> 
    } 
} 

// Now you can do in your screens 
/* This is wrong, please check update */ console.log(this.props.navigation.state.params.cats); 

更新(私は前の回答を台無し)詳細here

それは問題は完璧に動作解決

console.log(this.props.screenProps.cats); 
+0

でなければなりません。将来の初心者のために小道具にアクセスするための注意は "this.props.screenProps.cats"を使用します。 – GhostPengy

+0

@EmilsStopins申し訳ありません。私はそれを混ぜた。これは 'this.props.screenProps'でなければなりません。私は答えを更新しています – bennygenel

+0

ええ、私は私の答えも変えました。理解した。 *乾杯* – GhostPengy