React Native : RN/Develop

styled components 사용

곰돌이도한다. 2022. 3. 10. 18:20

참고 : https://styled-components.com/docs/basics#react-native

 

styled-components: Basics

Get Started with styled-components basics.

styled-components.com

npm i styled-components

 

 

import React from "react";
import styled from "styled-components/native";

const Btn = styled.TouchableOpacity`
  flex: 1;
  justify-content: center;
  align-items: center;
`;

const Title = styled.Text`
  color: ${(props) => (props.selected ? "blue" : "red")};
`;

const Movies = ({ navigation: { navigate } }) => (
  <Btn onPress={() => navigate("Stack", { screen: "Three" })}>
    <Title selected={false}>Movies</Title>
    <Title selected={true}>Movies</Title>
  </Btn>
);