基础组件

Text组件

一个用于显示文本的React组件，和Android中的TextView组件或者OC中的Label组件相类似，专门用来显示基本的文本信息；除了基本的显示布局之外，可以进行嵌套显示，设置样式，以及可以做事件(例如:点击)处理：

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) 进行设置Text显示文本的行数，如果显示的内容超过了行数，默认其他多余的信息就不会显示了
`onPress` (fcuntion)  该方法当文本发生点击的时候调用该方法
 `color`  字体颜色
`fontFamily`  字体名称
`fontSize`  字体大小
`fontStyle`   字体风格(normal,italic)
`fontWeight ` 字体粗细权重("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
`textShadowOffset`  设置阴影效果{width: number, height: number}
`textShadowRadius`  阴影效果圆角
`textShadowColor`  阴影效果的颜色
`letterSpacing`  字符间距
`lineHeight`  行高
`textAlign`   文本对其方式("auto", 'left', 'right', 'center', 'justify')
`textDecorationLine`  横线位置 ("none", 'underline', 'line-through', 'underline line-through')
`textDecorationStyle` 线的风格("solid", 'double', 'dotted', 'dashed')
 `textDecorationColor` 线的颜色
`writingDirection` 文本方向("auto", 'ltr', 'rtl')

在React-native中是没有样式继承这种说法的， 但是对于Text元素里边的Text元素，其实是能够继承的，是多继承。

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中该组件可以通过多种方式加载图片资源。

基本用法

• 从当前项目中加载图片

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

该图片资源文件的查找和JS模块相似，该会根据填写的图片路径相对于当前的js文件路径进行搜索。
此外，React Naive的Packager会根据平台选择相应的文件，例如:my_icon.ios.png和my_icon.android.png两个文件(命名方式android或者ios)，会分别根据android或者ios平台选择相应的文件。

• 加载使用APP中的图片
  加载mipmap中图片

//导入 nativeImageSource函数
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组件

因为TextInput是继承自View，所以View的属性TextInput也能够使用，一些样式类的属性在学习的时候可以参照View的相关属性。

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

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

具体API参考TextInput用法

Touchable组件

• 高亮触摸 TouchableHighlight
  当手指点击按下的时候，该视图的不透明度会进行降低同时会看到相应的颜色，其实现原理则是在底层新添加了一个View。此外，TouchableHighlight只能进行一层嵌套，不能多层嵌套。
  常用属性：
  activeOpacity number
  设置组件在进行触摸的时候，显示的不透明度(取值在0-1之间)
  onHideUnderlay function 方法
  当底层被隐藏的时候调用
  onShowUnderlay function 方法
  当底层显示的时候调用
  style
  可以设置控件的风格演示，该风格演示可以参考View组件的style
  underlayColor
  当触摸或者点击控件的时候显示出的颜色

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>
                           点我
                       </Text>

                   </View>

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

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

具体API参考Touchable用法