on
React Native 및 Webdriver를 사용하여 기본 모바일 앱 구축 및 테스트...
React Native 및 Webdriver를 사용하여 기본 모바일 앱 구축 및 테스트...
반응형
모바일 앱 구축의 근본적인 과제는 방대한 기술을 익히는 것이다.
그러나 애플리케이션을 구축한 후에는 엔드 투 엔드 테스트를 통해 사용자 환경을 손상시키는 기능적 결함이 없는지 확인하는 새로운 과제에 직면하게 됩니다. 이것을 해결하기 위해, 우리는 웹드라이버를 활용할 수 있다.IO: 단일 언어인 자바스크립트에서 iOS 및 안드로이드 앱에 대한 자동화 테스트를 작성할 수 있습니다.
React Native와 Webdriver의 조합IO를 사용하면 JavaScript에서만 크로스 플랫폼 네이티브 모바일 앱을 구축하고 테스트할 수 있습니다. 이 3부작 시리즈에서는 주가를 확인하고 자동화에 익숙하도록 리팩터링한 다음 자동화에 대한 테스트를 작성하는 앱을 만들 것입니다. 이 시리즈를 완성하면 iOS와 안드로이드에서 실행되며, 이 기능이 예상대로 작동하는지 확인할 수 있는 테스트 기능이 있습니다. 다음은 1부를 완료한 후 앱의 모습을 스크린샷으로 보여 줍니다.
이 React Native 프로젝트의 전체 소스 코드는 다음에서 찾을 수 있습니다.
본 가이드의 내용
전제조건
Xcode 및 안드로이드 스튜디오
노드.js
실
Watchman(macOS 사용자용)
엑스포 CLI
앱제스
간단히 말해서 JSX
소품에 대한 추가 정보
앱 구축
레이아웃 및 스타일링
검색 줄 구성 요소 만들기
주가 데이터 가져오는 중
스톡 뷰 구성요소 작성
리팩토링 앱.js
전제조건
Xcode 및 안드로이드 스튜디오
둘 다 설치하면 iOS 시뮬레이터와 안드로이드 에뮬레이터에서 테스트할 수 있습니다.
노드.js
Node.js는 자바스크립트 런타임 환경입니다. 공식 웹 사이트에서 OS용 Node.js LTS 릴리스의 사전 빌드된 설치 프로그램을 다운로드할 수 있습니다.
참고: M1 Mac을 사용하는 macOS 사용자는 Apple Silicon을 지원하므로 Node.js 16.X를 대신 사용할 수 있습니다.
실
Yarn은 페이스북에서 만든 자바스크립트 패키지 매니저로 npm 클라이언트의 대안이다. 이전 단계에서 Node.js를 설치한 후 다음 명령을 실행하여 실을 설치할 수 있습니다.
npm install --global [email protected]
참고: 1.22.11은 본 블로그 게시 당시 Yarn 1(Classic)의 최신 버전입니다.
Watchman(macOS 사용자용)
Watchman은 주어진 프로젝트 디렉토리의 파일을 감시하고 변경 시 동작을 트리거하기 위해 Facebook이 만든 도구입니다. 홈브루를 통해 설치할 수 있습니다.
brew install watchman
엑스포 CLI
Expo CLI는 Scaffold Native 프로젝트에 대응하고 시작할 수 있는 가장 쉬운 방법을 제공하는 명령줄 도구입니다. 또한 iOS와 안드로이드 기기에 설치할 수 있는 동반 엑스포 클라이언트 앱도 있어 무선으로 앱을 미리 볼 수 있습니다. 실을 통해 설치할 수 있습니다.
yarn global add [email protected]
참고: 4.11.0은 이 블로그 게시 당시 Expo CLI의 최신 버전입니다. 또한 npm에 더 익숙한 사용자에게는 위의 명령어가 npm 설치 --global [email protected]에 해당하는 실입니다.
Expo CLI를 설치하면 프로젝트 설정을 초기화할 수 있습니다.
expo init react-native-stock-price-app --template blank@sdk-42 --yarn
우리는 --템플릿 플래그를 사용하여 프로젝트를 지정하고자 합니다. 이 프로젝트는 Expo SDK 버전 42로 제작되었습니다. 이 블로그 게시물의 최신 버전입니다. 또한 --yarn 깃발을 전달하여 프로젝트가 npm 대신 yarn을 패키지 관리자로 사용하도록 합니다.
명령이 완료되면 react-native-stock-price-app라는 이름으로 새 프로젝트 디렉토리가 생성됩니다. 다음 디렉토리로 이동합니다.
cd react-native-stock-price-app/
엑스포 CLI가 우리 프로젝트를 편리하게 설계했다. 터미널에서 ls를 실행하면 프로젝트 디렉터리에 다음과 같이 표시됩니다.
. ├── .expo-shared ├── .git ├── .gitignore ├── App.js ├── app.json ├── assets ├── babel.config.js ├── node_modules ├── package.json └── yarn.lock
다음은 이러한 파일 및 디렉터리에 대한 간략한 개요입니다.
.expo-shared/ - 엑스포 프로젝트에 대한 구성 파일을 포함합니다. 이것들과 인터페이스할 필요가 없습니다. 엑스포 CLI가 활용하기 위해서죠.
.git - Expo에서는 프로젝트에 Git 버전 제어를 편리하게 설정했습니다.
.gitignore - Like Expo에서는 버전 제어에서 무시할 파일을 편리하게 설정합니다.
App.js - 여기가 애플리케이션 코드가 상주하는 곳입니다.
app.json - 엑스포 앱에 대한 정보를 추가할 수 있는 json 구성 파일입니다. 사용 가능한 구성 옵션 목록은 공식 문서에서 확인할 수 있습니다.
assets/ - 기본적으로 몇 개의 이미지 자산이 들어 있는 디렉토리입니다. 기본 앱 아이콘과 스플래시 화면 이미지가 제공됩니다.
babel.config.js - Babel 구성을 위한 사전 설정 및 플러그인을 정의할 수 있는 구성 파일입니다. Babel은 자바스크립트 환경 버전 간의 이전 버전 호환성을 위한 트랜스파일러입니다.
node_modules/ - 프로젝트에서 사용하는 모든 패키지를 포함하는 디렉터리입니다. 설치되는 모든 새로운 종속성은 여기에 있습니다.
꾸러미를 만들다json - 패키지 관리자의 프로젝트 정보입니다. 엑스포에서는 나중에 사용할 스크립트 명령을 편리하게 설정할 수 있습니다.
yarn.lock - 종속성을 설치하면 종속성 이름, 버전 및 설치된 위치를 매핑하는 항목이 이 파일에 생성됩니다.
빠른 테스트로 프로젝트 디렉터리에서 다음 명령을 실행합니다.
expo start
브라우저에 탭이 열리고 엑스포 개발자 도구 인터페이스가 로드됩니다.
인터페이스는 로그를 볼 수 있는 중앙 장소와 iOS 시뮬레이터나 안드로이드 에뮬레이터에서 앱을 실행하는 것과 같은 동작에 대한 바로 가기를 제공합니다. iOS 앱스토어나 구글플레이 스토어에서 엑스포 클라이언트 앱을 내려받은 뒤 QR코드를 스캔해 무선으로 실제 기기에서 테스트할 수도 있다. 다음은 Expo가 앱에서 만든 기본 보기입니다.
앱제스
Expo CLI가 준비한 프로젝트 파일 중에는 App.js 파일이 있습니다. 이것을 열면 다음과 같은 내용이 나타납니다.
// Imports import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; // Our App Component export default function App() { return ( Open up App.js to start working on your app! ); } // Our Stylesheet const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });
이 파일에는 App()이라는 기능이 있습니다. React Native에는 구성 요소라는 개념이 있으며, 이 개념은 앱 전체에서 재사용할 수 있도록 요소와 동작을 캡슐화하는 데 사용됩니다. 반응 네이티브에는 기능 구성 요소와 클래스 구성 요소의 두 가지 구성 요소가 있습니다. 간단히 말하면 기능 구성 요소는 고유한 상태를 가질 수 없는 반면 클래스 구성 요소는 가질 수 있다는 점입니다. 잠시 후에 이 개념으로 돌아오겠지만, 먼저 우리를 위해 만들어진 개념을 파일에 요약해 보겠습니다.
전체 앱은 View 구성 요소를 반환하는 단일 사용자 지정 구성 요소로, 여기에는 텍스트 및 상태 표시줄 구성 요소가 중첩되어 있습니다. 앱() 기능은 자동 생성되었지만 실제로는 사용자 지정 구성 요소입니다. 그러나 보기, 텍스트 및 상태 표시줄은 반응 네이티브 표준 라이브러리의 기본 구성 요소입니다.
마크업 구문을 JSX라고 합니다. HTML과 유사한 방식으로 구성요소를 표현하는 방법입니다. 예를 들어, View는 상위 항목이며 텍스트 및 상태 표시줄 요소를 하위 항목으로 포함합니다. 즉, React Native가 뒤에서 만드는 자바스크립트 함수 호출용 구문 설탕입니다.
View 구성 요소는 앱의 레이아웃 컨테이너입니다. 웹 개발 배경을 가진 사람들에게는 이 예에서 기본적으로처럼 사용되고 있습니다. 보기 내에는 텍스트 문자열을 렌더링하는 텍스트 구성 요소가 있습니다. 또한 화면 맨 위에 상태 표시줄을 구성하는 상태 표시줄 구성 요소도 있습니다. 텍스트와 달리 상태 표시줄 구성 요소는 화면에 아무것도 렌더링하지 않지만 모바일 OS UI의 기존 부분을 구성합니다. 간단히 말해서 JSX JSX는 React Native에 사용되는 자바스크립트 마크업 구문으로 구성 요소를 더 쉽게 표현할 수 있게 해줍니다. 장면 뒤에서 React.createElement() 함수를 사용하여 일반 자바스크립트 함수 호출로 컴파일됩니다. Hello World! 컴파일 대상은 다음과 같습니다. 첫 번째 매개 변수는 생성하려는 요소의 유형입니다. 이 경우 텍스트 요소입니다. 두 번째 매개변수는 요소의 특성입니다. 소품에 대해서는 잠시 더 이야기하겠지만, 대개 이벤트 핸들러나 스타일링 객체에 대한 언급입니다. 그러나 이 예에서는 어떤 것도 통과시키지 않습니다. 세 번째 매개 변수는 하위 요소(이 경우 문자열)입니다. 소품에 대한 추가 정보 소품을 사용하면 구성요소에 매개변수를 전달하여 사용자 정의할 수 있습니다. 나중에 알게 되겠지만 스타일, 이벤트 핸들러 및 구성 값과 같은 항목을 전달할 수 있습니다. 이러한 매개 변수는 자바스크립트 함수에 전달할 수 있는 매개 변수와 유사합니다. 사용 중인 구성 요소에 따라 일부 프로포트는 필수 또는 선택 사항입니다.Respect Native는 요소를 배치하고 정렬하는 데 flexbox를 사용합니다. 본 블로그 게시물에서 스타일 구성 요소에 대해 자세히 설명하지는 않겠지만, 공식 React Native Design 문서 섹션에서 개요를 볼 수 있습니다. export default class App extends React.Component { render() { return ( Open up App.js to start working on your app! ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, mainText: { color: 'blue', fontSize: 20, }, }); 또한 StyleSheet 객체의 배열을 전달하여 여러 스타일을 스타일 소품으로 전달할 수 있습니다. 예를 들어 다음과 같습니다.이렇게 하면 배열 끝에 있는 스타일이 이전 스타일보다 우선합니다. 앱의 사용자 인터페이스를 구성할 때 다음 섹션에서 이 작업을 수행하겠습니다.레이아웃 및 스타일링 import React from 'react'; import { ImageBackground, StyleSheet, Text, View, StatusBar} from 'react-native'; export default class App extends React.Component { render() { return ( Tesla, Inc 754.86 +0.98 ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'black', }, textStyle: { fontFamily: 'AvenirNext-Regular', textAlign: 'center', color: 'white', }, largeText: { fontSize: 45, }, mediumText: { fontSize: 35, }, smallText: { fontSize: 25, }, rectangleShapeContainer: { marginTop: 5, marginHorizontal: 160, borderRadius: 20, justifyContent: 'center', backgroundColor: 'green', }, imageContainer: { flex: 1, }, image: { flex: 1, width: null, height: null, resizeMode: 'cover', }, detailsContainer: { flex: 1, justifyContent: 'center', } }); 참고: 이 프로젝트의 GitHub repo에서 background.png 이미지 자산을 가져올 수 있습니다. ├── └── └── ├── ├── └── └── 새로 추가된 변경 사항으로 현재 앱은 다음과 같습니다.다음 단원에서는 점진적인 접근 방식을 취하여 먼저 사용자 지정 SearchBar 구성 요소를 만들 것입니다. 그런 다음 사용자가 주식 표시기 이름을 입력하고 결과를 표시할 수 있는 StockView라는 다른 사용자 정의 보기에 SearchBar를 포함시킵니다. 마지막으로 App.js에 구성 요소를 추가할 것입니다.앱에서는 사용자가 주식 표시 기호를 입력하여 현재 가격 값을 가져올 수 있는 방법이 필요합니다. 이를 위해 TextInput 및 Button 구성 요소로 구성되는 사용자 지정 구성 요소를 만들 수 있습니다.아래에 추가한 내용과 같이 SearchBar.js를 업데이트하십시오. 잠시 후에 요약하겠습니다. 클래스 구성 요소로 전송되는 텍스트 입력을 처리해야 하므로 SearchBar의 생성자() 메서드에서 로컬 상태를 초기화할 수 있습니다. SearchBar 클래스 구성 요소에서 상태라는 개체에 액세스할 수 있습니다. React Native(반응 네이티브)의 클래스 구성 요소에는 수정할 수 있는 로컬 상태 개체가 있습니다. 이 .props를 사용하여 클래스 구성 요소의 소품에 액세스할 수 있는 것처럼 이 .state를 사용하여 구성 요소의 로컬 상태에 액세스할 수 있습니다. 프로포트는 읽기 전용이며 구성 요소의 부모에 의해 소유되지만 상태는 구성 요소 자체에서 편집 및 소유할 수 있습니다. 이 경우 textValue라는 속성을 빈 문자열로 설정합니다. 수신되는 텍스트 입력을 저장하기 위해 textValue를 사용합니다. TextInput에는 onChangeText와 onSubmitEditing의 두 가지 동작 처리 기능이 있습니다. 이 두 가지 프로포트는 모두 콜백 함수를 허용합니다. onChangeText의 경우 텍스트 입력의 텍스트가 수정될 때 콜백이 호출됩니다. onSubmitEditing은 TextInput의 콘텐츠가 제출될 때 실행되는 콜백을 수락하며, 사용자가 텍스트를 입력한 후 가상 키보드의 입력 키를 누를 때 발생합니다. 이러한 기능에 대한 입력으로 handleChangeText와 handleSubmiting이라는 두 가지 콜백 기능을 만들었습니다. handleSubmitEditing의 경우, 새로운 통찰력은 우리가 텍스트 입력을 보낼 수 있는 소품들에 전달된 상위 구성요소로부터 콜백 함수를 받는 것이다. 렌더링() 함수에는 버튼으로 사용하는 TouchableOpacity 구성 요소가 있습니다. React Native Button 구성 요소를 대신 사용하지 않는 이유가 궁금하실 수 있습니다. 이 경우 정답은 스타일상의 이유로 터치식 불투명도 구성 요소를 스타일링하는 것이 표준 버튼보다 훨씬 유연합니다. 터치 가능Opacity 구성 요소에는 사용자가 구성 요소를 탭할 때 동작을 처리하기 위해 onPress라는 프로펠러가 있습니다. TextInput의 onSubmiting 프로펠트에 제공했던 콜백 기능을 그대로 제공합니다. 사용자 경험의 관점에서, 사용자는 그들의 가상 키보드에서 "Enter"를 누르거나 우리의 버튼을 눌러 그들의 주가 기호 텍스트를 제출할 수 있습니다.이제 텍스트를 수신할 수 있는 사용자 지정 구성 요소가 있으므로 수신한 정보로 작업을 수행할 수 있습니다. 주가 데이터를 가져오려면 재무 모델링 준비 API를 사용할 것입니다. 무료로 사용할 수 있으며 등록한 후에는 API 설명서 섹션에서 API 키를 볼 수 있습니다. API Key를 잠시 사용하겠습니다.프로젝트 디렉터리에 utils라는 디렉터리를 만듭니다. 사용 시 FetchStockPrice.js라는 파일을 생성합니다. 여기서는 특정 주식 표시 기호에 대한 주가 가져오기를 처리하는 기능을 만들 수 있습니다.API 호출을 통해 JSON 개체 내에서 반환되는 네 가지 정보가 있습니다. const fetchStockPrice = async (stockTickerSymbol) => { const endpoint = ""; const apiKey = ""; const response = await fetch(`${endpoint}/${stockTickerSymbol.toUpperCase()}?apikey=${apiKey}`); const result = await response.json(); const { name, price, change } = result[0]; const changeType = change > 0 ? "+" : "-" return { stockName: name, stockPrice: price.toFixed(2), changeValue: change > 0 ? `+${change.toFixed(2)}` : change.toFixed(2), changeType: changeType } }; export default fetchStockPrice; 주가 데이터 가져오는 중 주식 이름: 회사 이름. 애플 주식 가격: 소수점 뒤에 두 자리 숫자가 있는 재고 가격입니다. ChangeValue: 이것은 최근 주가와 이전 기간의 종가 간의 차이입니다. 음수가 아닌 경우 스타일링 목적으로 +를 추가합니다. changeType: 변경 값이 음수이면 -를 반환하고, 그렇지 않으면 +를 반환합니다. 다음 섹션에서 이 기능을 사용하여 구성 요소의 배경색을 시각적 효과를 위해 빨간색 또는 녹색으로 변경합니다.이 섹션에서는 재고 정보를 표시하는 사용자 지정 구성 요소를 만듭니다. 또한 이전에 만든 SearchBar를 가져와 사용하면서 React Native를 통해 구성요소를 함께 구성할 수 있는 방법을 시연합니다. import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; import SearchBar from './SearchBar'; export default function StockView(props) { return ( {props.stockName} {props.stockPrice} {props.changeValue} ) } const styles = StyleSheet.create({ textStyle: { fontFamily: 'AvenirNext-Regular', textAlign: 'center', color: 'white', }, largeText: { fontSize: 45, }, mediumText: { fontSize: 35, }, smallText: { fontSize: 25, }, rectangleShapeContainer: { marginTop: 5, marginHorizontal: 160, borderRadius: 20, justifyContent: 'center', backgroundColor: 'green', }, positiveChange: { backgroundColor: 'green', }, negativeChange: { backgroundColor: 'red', }, }); React Native를 사용하면 구성 요소에 조건부 스타일을 적용할 수 있습니다. 예를 들어, StockView 구성 요소의 이 파트에서는 다음과 같습니다.우리는 주가변동이 긍정적인지 부정적인지에 따라 전망의 배경색을 녹색이나 빨간색으로 바꾸고 있다.이제 맞춤형 부품과 주가 상승을 위한 도우미 기능이 있으니 앱제이 업데이트를 하고 모든 것을 함께 연결해 봅시다. 앱.js 파일을 아래 내용으로 업데이트하고 잠시 요약하십시오. import React from 'react'; import { ImageBackground, StyleSheet, Text, View, StatusBar, ActivityIndicator } from 'react-native'; import SearchBar from './components/SearchBar'; import StockView from './components/StockView'; import fetchStockPrice from './utils/fetchStockPrice'; export default class App extends React.Component { constructor(props) { super(props); // Initializing the properties in our local state this.state = { loading: false, error: false, stockName: '', stockPrice: 0, changeType: '+', changeValue: 0, } } // Callback function to execute fetchStockPrice(...) and update our local state accordingly handleFetchStockPrice = async (stockTickerSymbol) => { if (stockTickerSymbol) { this.setState({ loading: true }, async () => { try { const { changeType, changeValue, stockName, stockPrice } = await fetchStockPrice(stockTickerSymbol); this.setState({ error: false, loading: false, stockName: stockName, stockPrice: stockPrice, changeType: changeType, changeValue: changeValue }); } catch (e) { this.setState({ error: true, loading: false }); } }); } else { return; } } // This is a React Native lifecyle method // componentDidMount() executes immediately after the component (in this case App) // is inserted in the view hierarchy componentDidMount() { this.handleFetchStockPrice('TSLA') } render() { const { loading, error, stockName, stockPrice, changeType, changeValue } = this.state; return ( {!loading && error && Could not load the stock price, please try again. } {!loading && !error && } ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'black', }, textStyle: { fontFamily: 'AvenirNext-Regular', textAlign: 'center', color: 'white', }, smallText: { fontSize: 25, }, imageContainer: { flex: 1, }, image: { flex: 1, width: null, height: null, resizeMode: 'cover', }, detailsContainer: { flex: 1, justifyContent: 'center', } }); 리팩토링 앱.js {props.changeValue} 구성 요소 디렉토리에 StockView.js라는 새 파일을 만듭니다. StockView 구성 요소의 책임은 재고 정보를 수신하여 표시하는 것입니다. 따라서 StockView를 클래스 구성 요소가 아닌 기능 구성 요소로 만들 수 있습니다. 또한 StockView 내에서 SearchBar 구성 요소를 가져와 사용할 것입니다. 아래의 내용으로 StockView.js 파일을 업데이트하십시오. 스톡 뷰 구성요소 작성 건설업자는 현지 주에서 필요한 속성을 초기화하고 있습니다. 로드 속성을 사용하여 활동을 지시합니다.표시할지 숨길지 나타냅니다. 우리는 FetchStockPrice(...) 기능을 실행하는 데 도움이 되는 콜백 기능 핸들FetchetchStockPrice(...) 기능을 종료하기 직전에 로드 상태 속성을 true로 변경하여 활동을 수행합니다.표시기는 보기에 시각적으로 표시됩니다. React Native setState() 메서드는 콜백을 선택적 매개 변수로 받아들이며 여기서 FetchStockPrice(...)를 호출합니다. 통화가 완료되면 요청이 성공했는지 또는 오류가 발생했는지 여부에 따라 상태 속성을 업데이트합니다. 반응 네이티브에는 구성 요소가 생성, 변경 또는 보기 계층에서 제거될 때 특정 시점에 액세스할 수 있는 기본 수명 주기 방법이 있습니다. 구성 요소 DidMount()에서 handleFetchStockPrice(...)를 호출하여 문자열을 전달합니다.테슬라의 주식 표시 기호인 TSLA`는 기본값으로 사용됩니다. 생성자()가 처음 마운트되기 전에 호출되기 때문에 handleFetchStockPrice(...)와 같은 비동기 요청을 생성자()가 아닌 componentDidMount()에서 호출하는 것이 좋습니다. 따라서 상태를 초기화하는 데 생성자()를 사용하는 것이 가장 좋습니다. React Native를 사용하면 조건에 따라 구성 요소를 조건부로 로드할 수 있습니다. 예를 들어 코드의 이 섹션에서는 다음과 같습니다.로드가 거짓이고 오류가 참이면 사용자에게 다음과 같은 오류 메시지를 표시합니다.그러나 로딩이 거짓이고 오류가 거짓인 경우 사용자 지정 StockView 구성 요소를 표시합니다. 핸들FetchStockPrice(...) 콜백 기능을 onSubmit에 소품으로 전달합니다. 앱이 처음 로드되면 기본적으로 TSLA 티커 기호가 사용됩니다. 그러나 사용자가 원하는 주가 기호를 삽입하면 핸들FetchStockPrice(...) 콜백과 함께 StockView 내의 SearchBar 구성요소로 전달되어 사용자가 입력한 대로 이후에 새로운 주가 데이터를 가져올 수 있습니다. 다음 단계 계속해서 새로 만든 주가 앱을 사용해 보세요! {!loading && error && Could not load the stock price, please try again. } {!loading && !error && }
JSX는 React Native에 사용되는 자바스크립트 마크업 구문으로 구성 요소를 더 쉽게 표현할 수 있게 해줍니다. 장면 뒤에서 React.createElement() 함수를 사용하여 일반 자바스크립트 함수 호출로 컴파일됩니다. 컴파일 대상은 다음과 같습니다. 소품을 사용하면 구성요소에 매개변수를 전달하여 사용자 정의할 수 있습니다. 나중에 알게 되겠지만 스타일, 이벤트 핸들러 및 구성 값과 같은 항목을 전달할 수 있습니다. 이러한 매개 변수는 자바스크립트 함수에 전달할 수 있는 매개 변수와 유사합니다. 사용 중인 구성 요소에 따라 일부 프로포트는 필수 또는 선택 사항입니다.Respect Native는 요소를 배치하고 정렬하는 데 flexbox를 사용합니다. 본 블로그 게시물에서 스타일 구성 요소에 대해 자세히 설명하지는 않겠지만, 공식 React Native Design 문서 섹션에서 개요를 볼 수 있습니다. 또한 StyleSheet 객체의 배열을 전달하여 여러 스타일을 스타일 소품으로 전달할 수 있습니다. 예를 들어 다음과 같습니다.이렇게 하면 배열 끝에 있는 스타일이 이전 스타일보다 우선합니다. 앱의 사용자 인터페이스를 구성할 때 다음 섹션에서 이 작업을 수행하겠습니다.레이아웃 및 스타일링 참고: 이 프로젝트의 GitHub repo에서 background.png 이미지 자산을 가져올 수 있습니다. 새로 추가된 변경 사항으로 현재 앱은 다음과 같습니다.다음 단원에서는 점진적인 접근 방식을 취하여 먼저 사용자 지정 SearchBar 구성 요소를 만들 것입니다. 그런 다음 사용자가 주식 표시기 이름을 입력하고 결과를 표시할 수 있는 StockView라는 다른 사용자 정의 보기에 SearchBar를 포함시킵니다. 마지막으로 App.js에 구성 요소를 추가할 것입니다.앱에서는 사용자가 주식 표시 기호를 입력하여 현재 가격 값을 가져올 수 있는 방법이 필요합니다. 이를 위해 TextInput 및 Button 구성 요소로 구성되는 사용자 지정 구성 요소를 만들 수 있습니다.아래에 추가한 내용과 같이 SearchBar.js를 업데이트하십시오. 잠시 후에 요약하겠습니다. import React from 'react'; import { StyleSheet, TextInput, Text, TouchableOpacity, View } from 'react-native'; export default class SearchBar extends React.Component { // Initialize our SearchBar's state to empty text constructor(props) { // We have to first call the parent's constructor // The parent here is React.Component super(props); this.state = { textValue: '', }; } handleChangeText = (newStockSymbolTextValue) => { // Update the textValue in the component's state this.setState({ textValue: newStockSymbolTextValue }); } handleSubmitEditing = () => { // Get a reference to the function onSubmit from the props passed in const { onSubmit } = this.props; // Get the textValue from the component's state const { textValue } = this.state; if (textValue.length > 0) { // Run the onSubmit function with the textValue as input onSubmit(textValue); // Clear the textValue from the component's state this.setState({ textValue: '', }); } else { return; } } render() { const { placeholderTextInputLabelText } = this.props; const { textValue } = this.state; return ( Submit ); } } const styles = StyleSheet.create({ container: { height: 40, marginTop: 20, backgroundColor: '#7F8C8D', marginHorizontal: 80, paddingHorizontal: 10, borderRadius: 5, }, textInput: { flex: 1, color: 'white', textAlign: 'center', fontFamily: 'AvenirNext-Regular', }, submitButton: { height: 40, marginTop: 10, backgroundColor: '#007AFF', marginHorizontal: 80, paddingHorizontal: 10, borderRadius: 5, justifyContent: 'center' }, textStyle: { fontFamily: 'AvenirNext-Regular', textAlign: 'center', color: 'white', }, buttonText: { fontSize: 20, } });
프로젝트 디렉터리에 구성 요소라는 새 하위 디렉터리를 만듭니다. 이 안에 SearchBar.js라는 파일을 만듭니다. 이 파일에서는 SearchBar라는 클래스 구성 요소를 만듭니다. 우리가 SearchBar를 기능적 구성요소가 아닌 클래스 구성요소로 만들어야 하는 이유는 입력되는 텍스트에 액세스해야 주가를 가져올 수 있는 기능으로 보낼 수 있기 때문입니다.
검색 줄 구성 요소 만들기
React Native를 사용하면 원하는 사용자 인터페이스를 구성할 수 있도록 다른 구성 요소 내에 구성 요소를 중첩할 수 있습니다. 이 예에서는 현재 상태 표시줄 및 이미지 배경 구성요소를 하위 구성요소로 사용하는 기본 보기 구성요소가 있습니다. 다음은 현재 보기 계층에 대한 요약입니다.
우리는 이제 모의값으로 배치를 짜기 시작할 것이다. 아래 내용으로 App.js 파일을 업데이트하면 변경 사항을 잠시 요약해 드리겠습니다.
앱 구축
Tesla, Inc
빠른 학습 실험으로 텍스트 색상을 파란색으로 변경하고 스타일 소품을 제공하여 글꼴 크기를 늘립니다.
예를 들어, View 구성 요소는 스타일 프로포트를 사용할 수 있습니다. 스타일 소품은 CSS 파일의 JSON 표현과 같은 StyleSheet 객체를 받아들입니다. React Native가 제공하는 기본 제공 구성 요소로 작업할 때 공식 핵심 구성 요소 문서를 보고 어떤 기능을 사용할 수 있는지 알 수 있습니다.
React.createElement( "Text", // 1. The Element Type null, // 2. Props "Hello World!" // 3. Children );
여기 간단한 예가 있습니다.
export default class App extends React.Component { render() { return ( Open up App.js to start working on your app! ); } }
우리가 만들고 있는 앱의 경우 텍스트 입력을 받아들이기 때문에 상태 문제가 있습니다. 이제 기능 구성요소를 클래스 구성요소로 변경해 보겠습니다.
from http://it-ground.tistory.com/172 by ccl(A) rewrite - 2021-09-14 04:26:59