1. 程式人生 > >React Native 之Text 在字串中插入影象

React Native 之Text 在字串中插入影象

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

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Image,
  Text,
  TouchableHighlight,
  View
} from 'react-native';


export default class ViewProject extends Component {

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          welcome to <Image source={require('./img/icon.png')} style={styles.imageInTextStyle}/>
          React Native
        </Text>
      </View>
    );
  }


}



const styles = StyleSheet.create({
  container: {
    flex:1,
    justifyContent: 'center',
    alignItems:'center'
  },
  welcome:{
   fontSize:40,
   textAlign:'center',
   margin:5
  },
  imageInTextStyle:{
    width:100,
    height:100,
    resizeMode:'cover'
  }


});
AppRegistry.registerComponent('ViewProject', () => ViewProject);


相關推薦

React Native Text字串插入影象

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import

React NativeText控制元件屬性和樣式

屬性 numberOfLines 文字行數限制,新增後超過限制行數文字會在末尾預設以…的形式省略。 ellipsizeMode 設定文字縮略格式,配合numberOfLines使用,values: * tail:在末尾…省略(預設值) * c

react native Text 多餘的顯示省略號

當字數太多的時候我們需要省略號來顯示多餘的字,使用Text的屬性 第一個是:(幾行顯示) <Text numberOfLines={1}/> 第二個是:(省略號顯示的位置) 預設的是tail (尾部)  頭部 head 中間 middle

[Wondgirl]從零開始學React NativeText(五)

像不像iOS的富文字 <Text style={{color:'#00F'}}> 我的文字 </Text>

React Native Text居中顯示

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import

React Native Text的使用

前言 學習本系列內容需要具備一定 HTML 開發基礎,沒有基礎的朋友可以先轉至 HTML快速入門(一) 學習 本人接觸 React Native 時間並不是特別長,所以對其中的內容和性質瞭解可能會有所偏差,在學習中如果有錯會及時修改內容,也歡迎萬能的朋友們批評指出,謝

React NativeRedux動態插入reducer

       RN的使用狀態管理我們使用的方式大多數有倆種,分別是redux和mobx這倆種狀態工具。那麼這次選取redux考慮一個東西---reducer的動態注入。     首先說一下背景----假如說你的app有100 reducer,而我們的store是唯一的。那麼我

React NativeTouchable四組件

width font clas 容易 原生 ber 支持 cit out 一、TouchableHighlight 概念: 本組件用於封裝視圖,使其可以正確響應觸摸操作。當按下的時候,封裝的視圖的不透明度會降低,同時會有一個底層的顏色透過而被用戶看到,使得視圖變暗或變亮。

React Native登錄界面的布局

處理器 圖片 blank 轉載 圓角 print extends cit hit 版權聲明:本文為博主原創文章,未經博主允許不得轉載。 代碼註釋比較詳細 /** * Sample React Native App * https://github.com/fa

react-native遠程圖片修改後APP不更新

reactnative react-native react native 刷新圖片 base64今天在做客戶的項目時,有一個需求是App上要顯示遠端的圖片,而遠端的圖片有可能會更新,但圖片名不變。在react-native中,顯示圖片是用的自帶的Image組件,大家都知道react在更新組件之前都會判斷pr

使用WebStorm開發React-native基礎

ttr regexp 渲染 hang reg 路徑 tostring png text 配置問題: (1)找不到SDK路徑,或者沒有SDK對應的版本:SDK必須是android-23才可以(更新SDK) 解決方法:環境變量,必須設置Android_HOME

react-native模擬器調試

adb div connect oid native 令行 input 模擬 key 手動觸發搖一搖:adb shell input keyevent 82(有時模擬器搖一搖無效) android studio檢測不到模擬器: 命令行cd到模擬器安裝目錄,找到adb.exe

React Nativethis詳解

過程 show super try this registry alert item rop this引起的錯誤詳解 我們在學習React Native的過程中,肯定經常遇見過undefined is not an object這樣的問題吧,尤其是剛開始學習的

React Native屬性類型檢查機制詳解 PropType 變成 prop-types

word man div color object platform UC 靜態 ESS 屬性確認的作用 使用 React Native 創建的組件是可以復用的,所以我們開發的組件可能會給項目組其他同事使用。但別人可能對這個組件不熟悉,常常會忘記使用某些屬性,或者某些屬性傳

演算法“統計字串單詞的個數”

如,給定String,求此字串的單詞數量。字串不包括標點,大寫字母。例如String str="hello world hello hi";,單詞數量為3,分別是:hello world hello hi 。 public static void main(String[] args){

react nativelistview加下拉重新整理上拉分頁

直接上程式碼 var REQUEST_URL = 'xxxx&page='; import React, { Component } from 'react'; import { AppRegistry, Image, StyleSheet, Text, Vie

ios React-Native 找不到標頭檔案

我的解決辦法有點簡單暴力: 將package.json中的"react"直接改成16.2.0, react-native 改成了0.53.3,如下: "dependencies": {     "react": "16.2.0",     "re

React Native函式作為引數傳遞給另外一個函式去呼叫

1 用法 我們一般喜歡把js裡面的函式作為引數傳遞給另外一個函式,然後再呼叫這個函式,有點像C語言裡面的函式指標         2 程式碼測試 寫了一個函式,2個引數分別是函式,然後更具資料決定呼叫哪個函式 /** *

React Native通知欄訊息提示(android)

React Native之通知欄訊息提示(android)   一,需求分析與概述 1.1,推送作為手機應用的基本功能,是手機應用的重要部分,如果自己實現一套推送系統費時費力,所以大部分的應用都會選擇使用第三方的推送服務,如極光推送。 1.2,jpush-react-native 

React Native通知欄訊息提示(ios)

React Native之通知欄訊息提示(ios)   一,需求分析與概述 詳情請檢視:React Native之通知欄訊息提示(android) 二,極光推送註冊與整合 2.1,註冊 詳情請檢視:React Native之通知欄訊息提示(android) 2.2,整合(ios) 第