Text組件

一個(gè)用于顯示文本的React組件，和Android中的TextView組件或者OC中的Label組件相類(lèi)似，專(zhuān)門(mén)用來(lái)顯示基本的文本信息；除了基本的顯示布局之外，可以進(jìn)行嵌套顯示，設(shè)置樣式，以及可以做事件(例如:點(diǎn)擊)處理：

Attributes.style = {
    color string
    containerBackgroundColor string
    fontFamily string
    fontSize number
    fontStyle enum('normal', 'italic')
    fontWeight enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
    lineHeight number
    textAlign enum("auto", 'left', 'right', 'center')
    writingDirection enum("auto", 'ltr', 'rtl')
    numberOfLines number
    textAlign ("auto", 'left', 'right', 'center', 'justify')
    fontWeight ("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
    onPress  fcuntion
 }

`color` 字體顏色
 `numberOfLines` (number) 進(jìn)行設(shè)置Text顯示文本的行數(shù)，如果顯示的內(nèi)容超過(guò)了行數(shù)，默認(rèn)其他多余的信息就不會(huì)顯示了
`onPress` (fcuntion)  該方法當(dāng)文本發(fā)生點(diǎn)擊的時(shí)候調(diào)用該方法
 `color`  字體顏色
`fontFamily`  字體名稱(chēng)
`fontSize`  字體大小
`fontStyle`   字體風(fēng)格(normal,italic)
`fontWeight ` 字體粗細(xì)權(quán)重("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
`textShadowOffset`  設(shè)置陰影效果{width: number, height: number}
`textShadowRadius`  陰影效果圓角
`textShadowColor`  陰影效果的顏色
`letterSpacing`  字符間距
`lineHeight`  行高
`textAlign`   文本對(duì)其方式("auto", 'left', 'right', 'center', 'justify')
`textDecorationLine`  橫線位置 ("none", 'underline', 'line-through', 'underline line-through')
`textDecorationStyle` 線的風(fēng)格("solid", 'double', 'dotted', 'dashed')
 `textDecorationColor` 線的顏色
`writingDirection` 文本方向("auto", 'ltr', 'rtl')

在React-native中是沒(méi)有樣式繼承這種說(shuō)法的， 但是對(duì)于Text元素里邊的Text元素，其實(shí)是能夠繼承的，是多繼承。

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.textStyle}>
                    <Text>
                        <Text style={styles.textInnerStyle}>
                            真好。。。。。。。
                        </Text>
                    </Text>
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#ffffff',
    },
    textStyle:{
        backgroundColor: 'red'
    },
    textInnerStyle:{
        backgroundColor: 'yellow'
    },

});

Image組件

在React Native中該組件可以通過(guò)多種方式加載圖片資源。

基本用法

• 從當(dāng)前項(xiàng)目中加載圖片

<View style={styles.container}>
        <Text style={styles.textMarginTop}>加載本地的圖片</Text>
        <Image source={require('./img/2.png')} style={{width: 120, height: 120}}  />
     </View>

該圖片資源文件的查找和JS模塊相似，該會(huì)根據(jù)填寫(xiě)的圖片路徑相對(duì)于當(dāng)前的js文件路徑進(jìn)行搜索。
此外，React Naive的Packager會(huì)根據(jù)平臺(tái)選擇相應(yīng)的文件，例如:my_icon.ios.png和my_icon.android.png兩個(gè)文件(命名方式android或者ios)，會(huì)分別根據(jù)android或者ios平臺(tái)選擇相應(yīng)的文件。

• 加載使用APP中的圖片
  加載mipmap中圖片

//導(dǎo)入 nativeImageSource函數(shù)
let nativeImageSource = require('nativeImageSource');

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Image source={nativeImageSource({ android: 'mipmap/ic_launcher', width: 96, height: 96 })} />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#ffffff',
    },
});

具體API參考Image用法

TextInput組件

因?yàn)門(mén)extInput是繼承自View，所以View的屬性TextInput也能夠使用，一些樣式類(lèi)的屬性在學(xué)習(xí)的時(shí)候可以參照View的相關(guān)屬性。

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
               <TextInput
                   style={
                        {
                            backgroundColor: 'red',
                            width:100,
                            height:30,
                            placeholder:'請(qǐng)輸入大名',
                            textAlign: 'center'
                        }
                    }
               />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#ffffff',
    },
});

具體API參考TextInput用法

Touchable組件

• 高亮觸摸 TouchableHighlight
  當(dāng)手指點(diǎn)擊按下的時(shí)候，該視圖的不透明度會(huì)進(jìn)行降低同時(shí)會(huì)看到相應(yīng)的顏色，其實(shí)現(xiàn)原理則是在底層新添加了一個(gè)View。此外，TouchableHighlight只能進(jìn)行一層嵌套，不能多層嵌套。
  常用屬性：
  activeOpacity number
  設(shè)置組件在進(jìn)行觸摸的時(shí)候，顯示的不透明度(取值在0-1之間)
  onHideUnderlay function 方法
  當(dāng)?shù)讓颖浑[藏的時(shí)候調(diào)用
  onShowUnderlay function 方法
  當(dāng)?shù)讓语@示的時(shí)候調(diào)用
  style
  可以設(shè)置控件的風(fēng)格演示，該風(fēng)格演示可以參考View組件的style
  underlayColor
  當(dāng)觸摸或者點(diǎn)擊控件的時(shí)候顯示出的顏色

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
               <TouchableHighlight
                   activeOpacity={0.5}
                   underlayColor='blue'>

                   <View style={{width:100,height:60,backgroundColor: 'yellow',justifyContent: 'center'}}>

                       <Text>
                           點(diǎn)我
                       </Text>

                   </View>

               </TouchableHighlight>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor: '#ffffff',
        alignItems: 'center'
    },
});

具體API參考Touchable用法