react-native swipe 이용해서 화면 전환하기

How to Create a Swipeable Component in React Native – REACT NATIVE FOR YOU

How to Create a Swipeable Component in React Native

참고한 코드는 요기

package com.sampleapp3;

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "SampleApp3";
  }

  @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
      @Override
      protected ReactRootView createRootView() {
        return new RNGestureHandlerEnabledRootView(MainActivity.this);
      }
    };
  }
}

1. MainActivity.java

 

//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import SwipeableRow from './SwipeableRow';
// create a component
class App extends Component {
render() {
return (
<View style={styles.container}>
<SwipeableRow></SwipeableRow>
</View>
);
}
}
// define your styles
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
//make this component available to the app
export default App;

2.App.js

 

import React, { Component } from 'react';
import { Animated, StyleSheet, Text, View, Button} from 'react-native';
import { RectButton } from 'react-native-gesture-handler';
import Swipeable from 'react-native-gesture-handler/Swipeable';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

function HomeScreen({navigation}){
    return(
      <View style = {{flex : 1, alignItems : 'center', justifyContent : 'center',}}>
        <Text>Home Screen입니다.</Text>
      </View>
    );
  }
  
  function ProfileScreen(){
    return(
      <View style = {{flex : 1, alignItems : 'center', justifyContent : 'center',}}>
        <Text>ProfileScreen입니다.</Text>
      </View>
    );
  }

export default class SwipeableRow extends Component {
    renderLeftActions = (progress, dragX) => {
        return (
            <NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Welcome' }}/>
                </Stack.Navigator>
            </NavigationContainer>
        );
    };

    renderRightActions = (progress, dragX) => {
        return (
            <NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen name="Profile" component={ProfileScreen} options={{ title: 'Profile' }}/>
                </Stack.Navigator>
            </NavigationContainer>
        );
    };

    render() {
        return (
                <Swipeable renderLeftActions={this.renderLeftActions} renderRightActions={this.renderRightActions}>
                    <RectButton style={styles.rectButton}>
                    </RectButton>
                </Swipeable>
        );
    }
}

const styles = StyleSheet.create({
    leftAction: {
    flex: 1,
    backgroundColor: 'cyan',
    justifyContent: 'center',
    },
    actionText: {
    color: 'black',
    fontSize: 16,
    },
    rectButton: {
    width:'100%',
    height: '100%',
    backgroundColor: 'blue',
    },
});

3.SwipeableRow.js

 

결과 화면

 

파란 화면을 메인이라고 했을 때 양 옆으로 움직일 시 각각 다른 메뉴가 나오는 것을 알 수 있다..

이제 이거를 최대한 우리가 만들기로 했던 프로토타입과 유사한 형태로 고쳐봐야겠지...^^