Windows 에서 React Native 의 Android 환경 배치 및 레이아웃 예제

15370 단어 React
기초 환경 을 구축 하 다.
  • JDK(반드시,설명 하지 않 음)
  • SDK(사용 권장Android Studio,통합 SDK 및 시 뮬 레이 터)
  • genymotion(실제 기기 나 안 드 로 이 드 스튜디오 가 자체 적 으로 가지 고 있 는 시 뮬 레이 터 를 사용 하 는 경우 설치 하지 않 는 것 을 선택 할 수 있 습 니 다)
  • NVM(node 버 전 컨트롤 러,node 4.0 이상 버 전 필요)
    • 상기 설정 은 필수 가 아니 라 자신 에 게 맞 는 환경 을 스스로 선택 할 수 있 습 니 다.일부 설치 과정 은 벽 을 넘 는 것 과 관련 될 수 있 으 므 로 대 리 를 설정 해 야 합 니 다.
    구덩이 밟 기 기록 설정
    genymotion
    여기 서 genymotion 시 뮬 레이 터 를 선택 하여 설명 하고 Android Studio 가 자체 적 으로 가지 고 있 는 시 뮬 레이 터 에 대한 주의 점도 제시 합 니 다.실제 컴퓨터 를 사용 하 는 친 구 는 이 부분 을 뛰 어 넘 을 수 있 습 니 다.
    genymotion 의 설 치 는 두 가지 모델 이 있 는데 하 나 는 Oracle VM VirtualBox 가상 머 신 이 고 다른 하 나 는 정제 판 이 며 genymotion 의 운행 은 VirtualBox 가상 머 신 에 의존 합 니 다.
    안 드 로 이 드 6.0-API 23 시 뮬 레이 터 다운로드 선택
    2016310144554616.png (794×248)
    (API 목록 을 표시 할 수 없다 면 프 록 시 설정->NetWork->HTTP 프 록 시 사용 설정)
    시 뮬 레이 터 를 시작 합 니 다.일부 사람들 이 안 드 로 이 드 시작 인터페이스 에 걸 려 들 어 갈 수 없습니다.
    2016310144618611.png (521×245)
    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 구조 로 바 꿔 야 합 니 다.
    2016310144659242.png (1351×319)
    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
    역시...좋아,여기 서 자신 이 겪 은 문제 들 을 나 눠 보 자.
  • npm install-g react-native-cli:오류 의 가장 큰 가능성 은 node 버 전이 4.0 보다 낮 거나 프 록 시 설정 에 성공 하지 못 한 것 입 니 다
  • react-native run-android:이 명령 은 gradle 의존 을 다운로드 합 니 다.실행 에 실패 한 원인 은 대부분 대리 문제 때 문 입 니 다
    • C:\\Users\\사용자\AppData\.gradle 에 들 어가 gradle.properties(존재 하지 않 으 면 새로 만 들 기)를 열 고 수정 합 니 다.
    
systemProp.https.proxyHost=You https proxy
systemProp.https.proxyPort=You https proxyPort
systemProp.http.proxyHost=You proxy
systemProp.http.proxyPort=You proxyPort
    드디어 안 드 로 이 드 애플 리 케 이 션 을 뛰 게 되 었 습 니 다.정말 피곤 합 니 다.
    2016310144802849.png (537×531)
    배치
    여 기 는 세 가지 전형 적 인 레이아웃 으로 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>
    2016310144925872.png (629×1074)
    왼쪽 가운데 오른쪽 레이아웃
    좌우 가 넓 고 가운데 가 꽉 차다.
    스타일 시트:
    
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>
    2016310145019856.png (630×1090)
    상하 배치
    뉴스 와 포 털 앱 과 유사 한 레이아웃 으로 위아래 로 붙 이 고 중간 은 콘 텐 츠 구역 이다.
    스타일 시트:
    
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 레이아웃:
    2016310145058347.jpg (720×1280)
    우 리 는 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;
}
    C 언어 는 strcpy 함 수 를 사용 하지 않 고 문자열 복사 기능 을 어떻게 실현 합 니까?
    C 언어 문자 함수,메모리 함수 기능 및 구현 코드

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage