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;
    }
    
    

    좋은 웹페이지 즐겨찾기