리액트네이티브, 숫자 맞추기 앱 (커스텀 버튼, 누르기, 배경화면)

 

 

App.js

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

import StartGameScreen from './screens/StartGameScreen';

export default function App() {

  return <View style={styles.rootScreen}>

  <StartGameScreen />

  </View>;

}

const styles = StyleSheet.create({

  rootScreen: {

    flex: 1,

    backgroundColor: '#ddb52f'

  }

});

앱 화면 구성

 

 

StartGameScreen.js

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

import PrimaryButton from '../components/PrimaryButton';

function StartGameScreen() {

  return (

    <View style={styles.inputContainer}>

      <TextInput style={styles.numberInput} maxLength={2} keyboardType='number-pad' autoCapitalize='none' autoCorrect={false}/>

      <View style={styles.buttonsContainer}>

        <View style={styles.buttonContainer}>

          <PrimaryButton>Reset</PrimaryButton>

        </View>

        <View style={styles.buttonContainer}>

          <PrimaryButton>Confirm</PrimaryButton>

        </View>

      </View>

    </View>

  );

}

export default StartGameScreen;

const styles = StyleSheet.create({

  inputContainer: {

    justifyContent: 'center',

    alignItems: 'center',

    marginTop: 100,

    marginHorizontal: 24,

    padding: 16,

    backgroundColor: '#4e0329',

    borderRadius: 8,

    // android

    elevation: 8,

    // ios

    shadowColor: 'black',

    shadowOffset: {width: 0, height: 2},

    shadpwRadois: 6,

    shadowOpacity: 0.25

  },

  numberInput: {

    height: 50,

    width: 50,

    fontSize: 32,

    borderBottomColor: '#ddb52f',

    borderBottomWidth: 2,

    color: '#ddb52f',

    marginVertical: 8,

    fontWeight: 'bold',

    textAlign: 'center'

  },

  buttonsContainer: {

    flexDirection: 'row'

  },

  buttonContainer: {

    flex: 1

  }

});

text input,

버튼 2개로 구성

 

버튼은 또 컴포넌트로 구성

 

 

PrimaryButton.js

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

function PrimaryButton({ children }) {

 

  function pressHandler() {

    console.log('pressed')

  }

  return (

      <View style={styles.buttonOuterContainer}>

        <Pressable style={({pressed}) =>

        pressed ? [styles.buttonInnerContainer, styles.pressed] : styles.buttonInnerContainer}

        onPress={pressHandler} android_ripple={{color: '#640233'}}>

      {/* props.children */}

        <Text style={styles.buttonText}>{children}</Text>  

        </Pressable>

      </View>

  );

}

export default PrimaryButton;

const styles= StyleSheet.create({

  buttonOuterContainer:{

    borderRadius: 28,

    margin: 4,

    overflow: 'hidden'

  },

  buttonInnerContainer: {

    backgroundColor: '#72063c',

    borderRadius: 28,

    paddingVertical: 8,

    paddingHorizontal: 16,

    margin: 4,

    elevation: 2

  },

  buttonText: {

    color: 'white',

    textAlign: 'center'

  },

  pressed: {

    opacity: 0.75,

   

  }

});

버튼은 누를 수 있는 <Pressable> 로 구성

 

 

---

 

그라데이션 추가

expo install expo-linear-gradient

 

App.js에 적용

import { StyleSheet } from 'react-native';

import {LinearGradient} from 'expo-linear-gradient';

import StartGameScreen from './screens/StartGameScreen';

export default function App() {

  return <LinearGradient colors={['#4e0329','#ddb52f']} style={styles.rootScreen}>

  <StartGameScreen />

  </LinearGradient>;

}

const styles = StyleSheet.create({

  rootScreen: {

    flex: 1,

    backgroundColor: '#ddb52f'

  }

});

 

그라데이션과 백그라운드 적용

 

import { StyleSheet, ImageBackground } from 'react-native';

import {LinearGradient} from 'expo-linear-gradient';

import StartGameScreen from './screens/StartGameScreen';

export default function App() {

  return <LinearGradient colors={['#4e0329','#ddb52f']} style={styles.rootScreen}>

    <ImageBackground

      source={require('./assets/images/background.png')}

      resizeMode="cover"

      style={styles.rootScreen}

      imageStyle={styles.backgroundImage}

    >

      <StartGameScreen />

    </ImageBackground>

  </LinearGradient>;

}

const styles = StyleSheet.create({

  rootScreen: {

    flex: 1,

  },

  backgroundImage: {

    opacity: 0.15

  }

});

LinearGradient 로 그라데이션으로 컬러가 들어감

ImageBackground으로 로컬에 저장된 이미지를 가져와

resizeMode 에 맞춰 배경화면으로 들어감