React Native / Flexbox 레이아웃 기본 사용법 (flex, flexDirection, justifyContent, alignItems)

 

flex : 전체 비율 ( 1은 100%를 의미)

 

 

 

export default function Sandbox() {

    return(
        <View style={styles.container}>
            <Text style={styles.boxOne}>One</Text>
            <Text style={styles.boxTwo}>Two</Text>
            <Text style={styles.boxThree}>Three</Text>
            <Text style={styles.boxFour}>Four</Text>
        </View>
    )
}


const styles = StyleSheet.create({
    container: {
        flex :1,
        paddingTop: 40,
        backgroundColor :'#ddd'
    },
    boxOne:{
        backgroundColor:'violet',
        padding:10,
    },
    boxTwo:{
        backgroundColor:'gold',
        padding:10,
    },    
    boxThree:{
        backgroundColor:'coral',
        padding:10,
    },
    boxFour:{
        backgroundColor:'skyblue',
        padding:10,
    }

});

 

 

 

• flexDirection : 'row'

      / row 방향으로 item들이 쌓임 

 

flex :1 없는경우

    container: {
        flexDirection: 'row',        
        paddingTop: 40,
        backgroundColor :'#ddd'
    },

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

• flexDirection : 'column' (default)

      / colunm 방향으로 item들이 쌓임 

 

 

    container: {
        flexDirection: 'column',        
        paddingTop: 40,
        backgroundColor :'#ddd'
    },

 

 

 

 

 

 

 

 

 

 

좌 : flexDirection: 'column'(default)  우: : flexDirection: 'row'

 

    container: {
        flex :1,
        flexDirection: 'column',     // 왼
        flexDirection: 'row',        // 오
        paddingTop: 40,
        backgroundColor :'#ddd'
    },

 

 

 

 

flex-start                                                     center                                                        flex-end

 

 

 container: {
        flexDirection: 'row',
        justifyContent: 'flex-start', //없어도 동일
        paddingTop: 40,
        backgroundColor :'#ddd'
    }
    
   container: {
        flexDirection: 'row',
        justifyContent: 'center',
        paddingTop: 40,
        backgroundColor :'#ddd'
    }
    
 container: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        paddingTop: 40,
        backgroundColor :'#ddd'
    }

 

 

 

 

space-between                                                                               space-around

 

   container: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingTop: 40,
        backgroundColor :'#ddd'
    }
    
   container: {
        flexDirection: 'row',
        justifyContent: 'space-around',
        paddingTop: 40,
        backgroundColor :'#ddd'
    }

 

 

 

 

 

 center                                                   flex-start                                                       flex-end

 

 

 

 

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        justifyContent: 'space-around', 
        alignItems:'center',  // 'flex-start', 'flex-end'
        paddingTop: 40,
        backgroundColor :'#ddd'
    },
    boxOne:{
        backgroundColor:'violet',
        padding:10,
    },
    boxTwo:{
        backgroundColor:'gold',
        padding:20,
    },    
    boxThree:{
        backgroundColor:'coral',
        padding:30,
    },
    boxFour:{
        backgroundColor:'skyblue',
        padding:40,
    }

});

 

 

 

Flex

 

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function Sandbox() {

    return(
        <View style={styles.container}>
            <Text style={styles.boxOne}>One</Text>
            <Text style={styles.boxTwo}>Two</Text>
            <Text style={styles.boxThree}>Three</Text>
            <Text style={styles.boxFour}>Four</Text>
        </View>
    )
}


const styles = StyleSheet.create({
    container: {
        //flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-around',
        alignItems:'flex-end',
        paddingTop: 50,
        backgroundColor :'#ddd'
    },
    boxOne:{
        backgroundColor:'violet',
        padding:10,
    },
    boxTwo:{
        backgroundColor:'gold',
        padding:10,
    },    
    boxThree:{
        backgroundColor:'coral',
        padding:10,
    },
    boxFour:{
        backgroundColor:'skyblue',
        padding:10,
    }

});

 

 

 

 

 

 

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function Sandbox() {

    return(
        <View style={styles.container}>
            <Text style={styles.boxOne}>One</Text>
            <Text style={styles.boxTwo}>Two</Text>
            <Text style={styles.boxThree}>Three</Text>
            <Text style={styles.boxFour}>Four</Text>
        </View>
    )
}


const styles = StyleSheet.create({
    container: {
        //flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-around',
        alignItems:'flex-end',
        paddingTop: 50,
        backgroundColor :'#ddd'
    },
    boxOne:{
        flex: 1,
        backgroundColor:'violet',
        padding:10,
    },
    boxTwo:{
        flex: 1,
        backgroundColor:'gold',
        padding:10,
    },    
    boxThree:{
        flex: 1,
        backgroundColor:'coral',
        padding:10,
    },
    boxFour:{
        flex: 1,
        backgroundColor:'skyblue',
        padding:10,
    }

});

 

 

 

 

 

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function Sandbox() {

    return(
        <View style={styles.container}>
            <Text style={styles.boxOne}>One</Text>
            <Text style={styles.boxTwo}>Two</Text>
            <Text style={styles.boxThree}>Three</Text>
            <Text style={styles.boxFour}>Four</Text>
        </View>
    )
}


const styles = StyleSheet.create({
    container: {
        //flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-around',
        alignItems:'flex-end',
        paddingTop: 50,
        backgroundColor :'#ddd'
    },
    boxOne:{
        flex: 2,
        backgroundColor:'violet',
        padding:10,
    },
    boxTwo:{
        flex: 1,
        backgroundColor:'gold',
        padding:10,
    },    
    boxThree:{
        flex: 1,
        backgroundColor:'coral',
        padding:10,
    },
    boxFour:{
        flex: 1,
        backgroundColor:'skyblue',
        padding:10,
    }

});

 

 

 

 

응용

import { StatusBar } from 'expo-status-bar';
import React, {useState} from 'react';
import { StyleSheet, Text, View, FlatList, Alert, TouchableWithoutFeedback,Keyboard } from 'react-native';
import Header from './components/header';
import TodoItem from './components/todoItem';
import AddTodo from './components/addTodo';
import Sandbox from './components/sandbox';

export default function App() {

  const[todos, setTodos] = useState([
    {text: 'buy coffee', key: '1'},
    {text: 'create an app', key: '2'},
    {text: 'play on the switch', key: '3'},
  ]);

  const pressHandler = (key) => {
    setTodos((prevTodos) =>{
      return prevTodos.filter(todo => todo.key != key)
    })
  }

  const submitHandler = (text) => {

    if(text.length > 3){
      setTodos((prevTodos) => {
        return [
          { text: text, key: Math.random().toString() },
          ...prevTodos,
        ];
      });
    }else {
      Alert.alert('OOPS', 'Todos must be over 3 chars long', [
        {text: 'Understood', onPress: () => console.log('alert closed')},
      ]);
    }
  }

  return (
    // <Sandbox />
    <TouchableWithoutFeedback onPress={() => {
        Keyboard.dismiss();
        console.log('dismissed keyboard')
    }}>
      <View style={styles.container}>
        { /*header*/}
        <Header></Header>
        <View style={styles.content}>
          {/* to form*/ }
          <AddTodo submitHandler={submitHandler}></AddTodo>
          <View style={styles.list}> 
            <FlatList 
              data={todos}
              renderItem={({ item }) =>(
                <TodoItem item={item} pressHandler={pressHandler}/>
              )}
            />
          </View>
        </View>
      </View>
    </TouchableWithoutFeedback>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  content:{
    flex:1,
    padding:40,
    backgroundColor: 'skyblue',
  },
  list: {
    flex:1,
    marginTop:20,
    backgroundColor: 'yellow',

  }
});