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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

源码

/**
 * 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('./
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值