iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 7
1
Modern Web

React Native 航向真全端,建構雙平台 App系列 第 7

React Native 基礎元件 <Text> 簡介

  • 分享至 

  • xImage
  •  

本來預計今天要深入的介紹 React Native FlexBox 的,但是想想沒有其他元件做搭配排版,這樣顯得單調許多,所以接下來我會再多介紹一些元件。
今天我們要來介紹 <Text> 也是在先前初始專案中有看到的顯示文字的元件,這個元件非常的簡單我們直接來看看如何使用吧。

Text

一樣在開頭 import { Text } from 'react-native'; 就可以使用摟

<Text style={{ color: '#fff', fontSize: 30 }}> Hellow!! </Text>

也一樣是放 style ,然後 <Text></Text> 中間能擺你要放的文字
延伸昨天的範例來做一個小 Sample 吧

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

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

export default class HelloReactNative extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={[styles.center, { backgroundColor: 'cadetblue' }]}>
          <Text style={{ color: '#fff', fontSize: 30 }}> Hellow!! </Text>
        </View>
        <View style={[styles.center, { backgroundColor: 'darksalmon' }]}>
          <Text style={{ color: '#fff', fontSize: 30 }}> React Native </Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }
});

AppRegistry.registerComponent('HelloReactNative', () => HelloReactNative);

結果:
http://ithelp.ithome.com.tw/upload/images/20161222/20103341JV5eePQrlO.png

把這串貼上你的編輯器試試看吧,這裡也有簡單用到 Flex 做文字置中的動作,非常簡單吧
關於 Text 的 style , IOS 跟 Android 有些微差異,可以參考這裡


有問題歡迎來 React Native Taiwan 問喔
創科資訊


上一篇
React Native 基礎元件 <View> 簡介
下一篇
React Native 基礎元件 <Image> 簡介
系列文
React Native 航向真全端,建構雙平台 App30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言