React-navigation hakkında

[guvenakcoban]

Merhabalar,

React-Navigation kullanıyorum fakat redux ve redux-thunk ile navigasyonu action dosyalarımda tam olarak nasıl kullanacağımı çözemedim. Sizce en mantıklı kullanım nasıldır?

[abdurrahmanekr]

Merhaba, geç cevap verdiğim için üzgünüm, tam cevap vereceğim zaman işim çıkıyor :/ React'ten mi React native'den mi bahsediyorsunuz? React native'de yapmanız gereken çok kolay. StackNavigator üzerinde şöyle bir yapı kurabilirsiniz:

import React from 'react';

import {
    AppRegistry,
    View,
} from 'react-native';

import { StackNavigator } from 'react-navigation';

import Login from './screens/Login'; 
import Start from './screens/Start'; // bu dizindeki dosyayı da altta paylaşıyorum
import Home from './screens/Home';

const Navigator = StackNavigator({
    Start: {
        screen: Start,
    },
    Login: {
        screen: Login,
    },
    Home: {
        screen: Home,
    },
});

const App = () => (
    <View
        style={{ flex: 1 }}>
        <Navigator />
    </View>
);

AppRegistry.registerComponent('App', () => App);

Start.js dosyası da şöyle olur:

import React, { Component } from 'react';

import {
    View,
    ActivityIndicator,
} from 'react-native';

export default class Start extends Component {

    constructor(props) {
        super(props);
    }

    componentWillMount() {
        this.isLogin();
    }

    isLogin() {
        var self = this;
        isLogin().then((res) => {
            if (res) {
                const resetAction = NavigationActions.reset({
                    index: 0,
                    actions: [
                        NavigationActions.navigate({ routeName: 'Home' }),
                    ],
                    key: null
                });

                self.props.navigation.dispatch(resetAction);
            }
            else {
                const resetAction = NavigationActions.reset({
                    index: 0,
                    actions: [
                        NavigationActions.navigate({ routeName: 'Login' }),
                    ],
                    key: null
                });

                self.props.navigation.dispatch(resetAction);
            }
        });
    }

    render() {
        return(
            <View
                style={{
                    flex: 1,
                    flexDirection: 'column',
                    alignItems: 'center',
                    justifyContent: 'center',
                }}>
                <ActivityIndicator
                    animating={true}
                    size="large"/>
            </View>
        );
    }
}

Start.navigationOptions = {
    header: null,
}