开发一个基于React Native的简易demo--源码

最新推荐文章于 2022-12-23 17:47:49 发布

J_小浩子

最新推荐文章于 2022-12-23 17:47:49 发布

阅读量706

点赞数

文章标签： react-native 源码

本文链接：https://blog.csdn.net/change_on/article/details/78739361

版权

这篇博客主要记录了作者使用React Native开发一个简易demo的过程，旨在个人学习笔记，详细提供了源码供参考。

摘要由CSDN通过智能技术生成

这几篇博客的最终目地是为了给我自己做笔记，所以我不管文章对其他人有没有帮助。只为我自己！！！

源码：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  AppRegistry,
  FlatList,
  ScrollView,
  ListView,
  TouchableHighlight,
  Dimensions,
  ToastAndroid
} from 'react-native';
import { TabNavigator } from "react-navigation";
import Swiper from 'react-native-swiper';
import Video from 'react-native-video';
const { width } = Dimensions.get('window')

//文字列表类
class CELL extends Component{

    constructor(props){
      super(props);
      this.state = { detailTitle:'aaaa'};
    }
    render(){
      return(
            <View style={
   {
   flexDirection: 'column', backgroundColor:'#363636'}}>
                <View style={
   {
   flexDirection: 'row',padding:10, justifyContent:'center',flex:1,alignItems:'center'}} >
                  <Text style={
   {
   flex:2 ,marginLeft:10,marginRight:10,color:'#fff',fontSize: 15}} >{this.props.title}</Text>
                  <Text style={
   {
   flex:1,marginRight:10,color:'#fff',fontSize: 12,textAlign:'right'}}>{this.props.detailTitle}</Text>
                </View>
                <View style={
   {
   height:.5,alignSelf:'stretch',backgroundColor:'gray'}}></View>
            </View>
        );
    }
  }

  //视频列表类
  class COLL extends Component{
      constructor(props){
        super(props);
        this.state = { detailTitle:'aaaa'};
      }
      render(){
        return(
              /*总体的布局，沿着竖轴排列*/
              <View style={
   {
   flexDirection:'column', backgroundColor:'#363636',borderBottomWidth:3,borderBottomColor:'#121212'}}>

                  {/* 第一部分:信息部分，里面分为3个列，沿着水平轴排列 */}
                  <View style={
   {
   flexDirection:'row',padding:10, justifyContent:'center',flex:1,alignItems:'center'}} >
                      {/*头像*/}
                      <View style={
   {
   flexDirection: 'row',flex:1}} >
                           <Image source={require('./img/profile.jpg')} style={styles.imgProfile}></Image>
                      </View>
                      {/*作者信息和发布时间/观看信息*/}
                      <View style={
   {
   flexDirection:'row',justifyContent:'center',flex:6,alignItems:'center'}} >
                          {/* 作者信息 */}
                          <View style={
   {
   flexDirection:'column',flex:1,justifyContent:'flex-start'}} >
                              <Text style={
   {
   flex:1,color:'#fff',fontSize: 12,color:'#1C86EE',textAlign:'left'}}>刘邦</Text>
                              <Text style={
   {
   flex:1,color:'#fff',fontSize: 10,textAlign:'left'}}>Duang</Text>
                          </View>
                          {/* 发布时间/观看信息 */}
                          <View style={
   {
   flexDirection:'column',flex:1,justifyContent:'flex-end'}} >
                              {/* 发布时间 */}
                              <Text style={
   {
   flex:1,color:'#fff',fontSize: 12,textAlign:'right'}}>4天前</Text>
                              {/* 观看 */}
                              <View style={
   {
   flexDirection:'row',justifyContent:'flex-end',flex:1}} >
                                  <Text style={
   {
   flex:4}}></Text>
                                  <Image source={require('./img/view.png')} style={
   {
   width:16,height:16}}></Image>
                                  <Text style={
   {
   flex:1,color:'#fff',fontSize: 10,textAlign:'left'}}>4563</Text>
                              </View>
                          </View>
                      </View>
                  </View>

                  {/* 第二部分:视频 就一个View*/}
                  <View style={
   {
   flexDirection:'row',justifyContent:'center',flex:1,alignItems:'center'}} >
                         {/* <Image source={require('./