Windows 에서 React Native 의 Android 환경 배치 및 레이아웃 예제
15370 단어 React
구덩이 밟 기 기록 설정
genymotion
여기 서 genymotion 시 뮬 레이 터 를 선택 하여 설명 하고 Android Studio 가 자체 적 으로 가지 고 있 는 시 뮬 레이 터 에 대한 주의 점도 제시 합 니 다.실제 컴퓨터 를 사용 하 는 친 구 는 이 부분 을 뛰 어 넘 을 수 있 습 니 다.
genymotion 의 설 치 는 두 가지 모델 이 있 는데 하 나 는 Oracle VM VirtualBox 가상 머 신 이 고 다른 하 나 는 정제 판 이 며 genymotion 의 운행 은 VirtualBox 가상 머 신 에 의존 합 니 다.
안 드 로 이 드 6.0-API 23 시 뮬 레이 터 다운로드 선택
(API 목록 을 표시 할 수 없다 면 프 록 시 설정->NetWork->HTTP 프 록 시 사용 설정)
시 뮬 레이 터 를 시작 합 니 다.일부 사람들 이 안 드 로 이 드 시작 인터페이스 에 걸 려 들 어 갈 수 없습니다.
genymotion 의 운행 은 X 86 의 구 조 를 바탕 으로 arm 보다 X 86 의 성능 이 더욱 원활 하 다.X86 구 조 를 사용 하려 면 HAXM 도 설치 해 야 합 니 다.
1.SDK Manager->Extras->Intel x86 Emulator Accelerator 를 열 고 설치 하면 됩 니 다.아무것도 표시 되 지 않 으 면 프 록 시 문제,도구->옵션->프 록 시 설정
2,입장 C:\\\Users\\사용자\AppData\\로 컬\\안 드 로 이 드\\sdk\extras\\intel\\하드웨어Accelerated_Execution_Manager
intelhaxm-android.exe 를 설치 하 는 중 오류 가 발생 했 습 니 다.참고 하 십시오.
이로써 우 리 는 시 뮬 레이 터 인터페이스 에 들 어 갈 수 있다.
Android Studio
안 드 로 이 드 스튜디오 자체 시 뮬 레이 터 를 사용 하려 면 AVD Manager->Create Virtual Device->필요 한 안 드 로 이 드 버 전 을 선택 할 수 있 습 니 다.
주의해 야 할 것 은 시 뮬 레이 터 는 기본적으로 X86 구 조 를 선택 합 니 다.마음 에 들 지 않 으 면 직접 arm 구조 로 바 꿔 야 합 니 다.
NVM
node 버 전 을 NVM 으로 제어 하 는 것 을 선택 하 십시오.node 4.0 이상 의 버 전 을 설치 했다 면 여 기 를 건 너 뛰 십시오.
설치 방식 과 문 서 를 사용 합 니 다.github 에서 분명히 말 했 습 니 다.여기 서 프 록 시 설정 을 말 합 니 다.사실은 npm 의 프 록 시 입 니 다.전역 프 록 시 를 설정 합 니 다.
npm config set proxy=you proxy
npm config set https-proxy=you https proxy
React-native 초기 화마음 은 묵묵히 다음 명령 을 기도 합 니 다.절대 틀 리 지 마 세 요...
npm install -g react-native-cli
react-native init AwesomeProject
cd AwesomeProject
react-native start
react-native run-android
역시...좋아,여기 서 자신 이 겪 은 문제 들 을 나 눠 보 자.
systemProp.https.proxyHost=You https proxy
systemProp.https.proxyPort=You https proxyPort
systemProp.http.proxyHost=You proxy
systemProp.http.proxyPort=You proxyPort
드디어 안 드 로 이 드 애플 리 케 이 션 을 뛰 게 되 었 습 니 다.정말 피곤 합 니 다.배치
여 기 는 세 가지 전형 적 인 레이아웃 으로 react-native 레이아웃 개념 을 설명 합 니 다.주로 flexbox 를 위주 로 합 니 다.react native 에는 두 가지 기본 요소 인'View'와'Text'가 있 는데 각각 웹 엔 드 div 와 span 과 유사 하여 레이아웃 과 수식 에 사 용 됩 니 다.주의해 야 할 것 은 react native 가 모든 CSS 속성 을 지원 하 는 것 이 아니 라 react native 가 지원 하 는 CSS 속성 이 있 습 니 다.
준비 작업
JSX 에서 스타일 을 쓰 는 것 은 익숙 하지 않 습 니 다.여 기 는 react-native-css 모듈 을 사용 하여 스타일 을 작성 합 니 다.설치,사용 과정 은 다음 과 같 습 니 다.
npm install react-native-css -g
react-native-css -i style.css -o style.js --watch
배치 설명좌우 배치
가로 레이아웃 이기 때문에 우 리 는 flex-direction:row(기본 수직 레이아웃)가 필요 합 니 다.좌우 로 1:1 방식 으로 레이아웃 을 하면 모두 flex:1 이 필요 합 니 다.레이아웃 용기 도 flex:1 을 더 해서 신축 용기 로 표시 해 야 합 니 다.react native 에 br 태그 가 없 기 때문에 줄 을 바 꾸 려 면 줄 바 꿈 자 를 삽입 할 수 밖 에 없습니다.
스타일 시트:
wrap {
flex:1;
flex-direction: row;
background-color: yellow;
}
left{
flex:1;
background-color: #64BA9D;
}
right{
flex:1;
background-color: #008E59;
}
text{
padding:10;
font-size:16;
color:#EEEEEE;
line-height:20;
text-align: center;
}
페이지 구조:
<View style={styles.wrap}>
<View style={styles.left}>
<Text style={styles.text}>
{'
'}
{'
'}
{'
'}
{'
'}
</Text>
</View>
<View style={styles.right}>
<Text style={styles.text}>
{'
'}
{'
'}
{'
'}
{'
'}
</Text>
</View>
</View>
왼쪽 가운데 오른쪽 레이아웃
좌우 가 넓 고 가운데 가 꽉 차다.
스타일 시트:
wrap {
flex:1;
flex-direction: row;
background-color: yellow;
}
left{
width: 80;
background-color: #64BA9D;
}
centent{
flex:1;
background-color: #a9ea00;
}
right{
width: 80;
background-color: #008E59;
}
text{
padding:10;
font-size:16;
color:#EEEEEE;
line-height:20;
text-align: center;
}
페이지 구조:
<View style={styles.wrap}>
<View style={styles.left}>
<Text style={styles.text}>
{'
'}
{'
'}
{'
'}
{'
'}
</Text>
</View>
<View style={styles.centent}>
<Text style={styles.text}>
{'
'}
{'
'}
{'
'}
{'
'}
</Text>
</View>
<View style={styles.right}>
<Text style={styles.text}>
{'
'}
{'
'}
{'
'}
{'
'}
</Text>
</View>
</View>
상하 배치
뉴스 와 포 털 앱 과 유사 한 레이아웃 으로 위아래 로 붙 이 고 중간 은 콘 텐 츠 구역 이다.
스타일 시트:
wrap {
flex:1;
flex-direction:column;
}
top{
height: 40;
background-color: #008E59;
}
centent{
flex:1;
background-color: #64BA9D;
}
bottom{
height: 40;
background-color: #a9ea00;
}
text{
padding:10;
font-size:16;
color:#fff;
line-height:20;
text-align: center;
}
페이지 구조:
<View style={styles.wrap}>
<View style={styles.top}>
<Text style={styles.text}>
</Text>
</View>
<View style={styles.centent}>
<Text style={styles.text}>
{'
'}
</Text>
</View>
<View style={styles.bottom}>
<Text style={styles.text}>
</Text>
</View>
</View>
종합 배치간단 한 아 날로 그 왕 이 뉴스 APP 레이아웃:
우 리 는 APP 레이아웃 방식 을 간단하게 볼 수 있 습 니 다.전체적으로 보면 상하 의 레이아웃 방식 입 니 다.우 리 는 외부 구 조 를 초보 적 으로 작성 할 수 있 습 니 다.
페이지 구조:
<View style={styles.wrap}>
<View style={styles.top}>
<Text> </Text>
</View>
<View style={styles.cententWrap}>
<Text> </Text>
</View>
<View style={styles.bottom}>
<Text>
</Text>
</View>
</View>
스타일 시트:
wrap {
flex:1;
flex-direction:column;
}
top{
height: 40;
background-color: #EC403C;
}
cententWrap{
flex:1;
flex-direction:column;
}
bottom{
height: 40;
}
대개 구 조 는 구축 이 끝 난 셈 이 고 머리 전 시 를 보완 하기 시작 합 니 다.(게 으 름 피 우 고 싶 지 않 으 면 title 로 대체 하면 됩 니 다~~)페이지 구조:
<View style={styles.wrap}>
<View style={styles.top}>
<Text style={styles.topTitle}> </Text>
</View>
<View style={styles.cententWrap}>
<Text> </Text>
</View>
<View style={styles.bottom}>
<Text>
</Text>
</View>
</View>
스타일 시트:
topTitle{
margin-top: 15;
margin-left: 20;
text-align: left;
font-size: 14;
color:#FFF;
}
머리 내용 이 완 성 된 후에 내용 구역 의 네 비게 이 션 바 를 보완 합 니 다.그러나 react-native 는 ul,li 태그(나중에 있 을 수도 있 습 니 다)를 제공 하지 않 았 습 니 다.이것 은 View 로 ul 을 대체 하고 Text 는 li 를 대체 하 며 코드 와 데 이 터 는 다음 과 같 습 니 다.페이지 구조:
var cententNav = [' ', ' ', ' ', ' ', ' '];
return (
<View style={styles.wrap}>
<View style={styles.top}>
<Text style={styles.topTitle}> </Text>
</View>
<View style={styles.cententWrap}>
<View style={styles.cententNav}>
{
cententNav.map(function(el, index){
return <Text style={styles.cententNavText}>
<Text style={index == 0 ? styles.textR : ""}>{cententNav[index]}</Text>
</Text>
})
}
</View>
</View>
<View style={styles.bottom}>
<Text>
</Text>
</View>
</View>
);
스타일 시트:
cententWrap{
flex:1;
flex-direction:column;
}
cententNav{
flex-direction: row;
height: 20;
margin-left: 5;
margin-top: 5;
margin-right: 5;
}
cententNavText{
width: 60;
font-size: 14;
color: #9C9C9C;
margin-left: 10;
}
뉴스 주 제 는 좌우 두 칸 으로 나 눌 수 있 습 니 다.왼쪽 칸 은 고정 되 어 있 고 오른쪽 칸 은 가득 차 있 습 니 다.react-native 는 overflow:scroll 속성 을 지원 하지 않 기 때문에 여 기 는 ScrollView 의 스크롤 바 구성 요 소 를 사용 하여 뉴스 개술 을 보 여 줍 니 다.지면 이 비교적 길 수 있 습 니 다.아래쪽 은 더 이상 작성 하지 않 습 니 다(게 으 름~).각자 보완 하 세 요.다음은 모든 레이아웃 코드 와 스타일 입 니 다.페이지 구조:
render: function() {
// var repeatArr = Array(100).join("1").split("")
var cententNav = [' ', ' ', ' ', ' ', ' '],
NEW_DATA = [
{
img: "http://7xl041.com1.z0.glb.clouddn.com/new1.png",
title: " ",
content: " \“ \” ",
typeImg: "http://7xl041.com1.z0.glb.clouddn.com/new-type1.png"
},
//.....
];
return (
<View style={styles.wrap}>
<View style={styles.top}>
<Text style={styles.topTitle}> </Text>
</View>
<View style={styles.cententWrap}>
<View style={styles.cententNav}>
{
cententNav.map(function(el, index){
return <Text style={styles.cententNavText}>
<Text style={index == 0 ? styles.textR : ""}>{cententNav[index]}</Text>
</Text>
})
}
</View>
<ScrollView style={styles.centent}>
{
NEW_DATA.map(function(el, index){
return (
<View>
<View style={styles.cententLi}>
<Image source={{uri: NEW_DATA[index].img}} style={styles.cententImg} />
<View style={styles.rightCentent}>
<Text style={styles.cententTitle}>{NEW_DATA[index].title}</Text>
<Text style={styles.cententCentent}>{NEW_DATA[index].content}</Text>
</View>
<Image source={{uri: NEW_DATA[index].typeImg}} style={styles.cententType} />
</View>
<View style={styles.line}></View>
</View>
)
})
}
</ScrollView>
</View>
<View style={styles.bottom}>
<Text style={styles.text}>
</Text>
</View>
</View>
);
}
스타일 시트:
wrap {
flex:1;
flex-direction:column;
}
top{
height: 40;
background-color: #EC403C;
}
topTitle{
margin-top: 15;
margin-left: 20;
text-align: left;
font-size: 14;
color:#FFF;
}
cententWrap{
flex:1;
flex-direction:column;
}
cententNav{
flex-direction: row;
height: 20;
margin-left: 5;
margin-top: 5;
margin-right: 5;
}
cententNavText{
width: 60;
font-size: 14;
color: #9C9C9C;
margin-left: 10;
}
centent{
flex:1;
flex-direction:column;
borderBottomWidth:1;
}
cententLi{
flex-direction: row;
margin-left: 10;
margin-right: 10;
}
cententImg{
width: 80;
height: 80;
}
cententTitle{
font-size: 16;
color: #232323;
margin-bottom: 3;
}
cententCentent{
font-size: 12;
}
rightCentent{
flex: 1;
padding-left: 5;
padding-top: 5;
padding-right: 5;
padding-bottom: 5;
}
cententType{
width: 40;
height: 22;
position: absolute;
bottom: 0;
right: 0;
}
bottom{
height: 40;
}
text{
padding:10;
font-size:16;
color:#000;
line-height:20;
text-align: center;
}
textR{
font-weight: bold;
color:#EC403C;
}
line{
height: 1;
background-color: #E4E4E4;
margin-left: 10;
margin-right: 10;
margin-top: 7;
margin-bottom: 7;
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
바삭바삭하고 간단한 결제 페이지 만들기먼저 Next.js에서 프로젝트를 만듭니다. Vercel & Next.js가 매우 편하기 때문에 최근에는이 구성을 사용하고 있습니다. 그런 다음 Tailwind CSS를 넣습니다. Tailwind CSS를 사용하면 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.