RN基本控件以及布局样式

基本控件以及布局样式

View

    View是一个支持Flexbox布局、样式、一些触摸处理、和一些无障碍功能的容器，

    并且它可以放到其它的视图里，也可以有任意多个任意类型的子视图

   

       

       

   

Text

    显示文本的React组件，并且它也支持嵌套、样式，以及触摸处理

    {this.state.titleText}

Image:

    不同类型图片的React组件，包括网络图片、本地资源

      同级

      下级

      上级

      同级文件夹

   

TextInput

    输入文本的基础组件。

    onChangeText的属性，此属性接受一个函数，而此函数会在文本变化时被调用。

    onSubmitEditing的属性，会在文本被提交后（用户按下软键盘上的提交键）调用

   

        style={{height: 40}}

        placeholder="Type here to translate!"

        onChangeText={(text) => this.setState({text})} />

   

    style={{padding: 10, fontSize: 42}}>

        {this.state.text}

   

Button：

    显示一个简单的按钮

    是一个简单的跨平台的按钮组件。

   

        onPress={() => {

            Alert.alert("你点击了按钮！");

        }}

        title="点我！"

        color="#841584"

    />

Touchable系列组件:

    TouchableHighlight来制作按钮或者链接。注意此组件的背景会在用户手指按下时变暗。

    在Android 上还可以使用TouchableNativeFeedback，它会在用户手指按下时形成类似墨水涟漪的视觉效果。

    TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。

    如果你想在处理点击事件的同时不显示任何视觉反馈，则需要使用TouchableWithoutFeedback。

   

        onPress={this._onPressButton} //点击响应

        onLongPress={this._onLongPressButton} //长按响应

        underlayColor="white"

    >

       

            TouchableHighlight

       

   

//--------------------------------------------------------------------------------------------------   

样式:

    style的属性;驼峰命名法，例如将background-color改为backgroundColor

    还可以传入一个数组——在数组中位置居后的样式对象比居前的优先级更高,间接实现样式的继承

    使用StyleSheet.create来集中定义组件的样式

   

        just red

        just bigblue

        bigblue, then red

        red, then bigblue

   

    const styles = StyleSheet.create({

        bigblue: { color: 'blue', fontWeight: 'bold', fontSize: 30, },

        red: { color: 'red', },

    });

    关于样式

    （1）普通内联样式:{{}},第一层｛｝是表达式，第二层｛｝是js对象；

                     

    （2）调用样式表:{样式类.属性}

                     

    （3）样式表和内联样式共存:{[]}

                     

    （4）多个样式表:{[样式类1， 样式类2]}

                    

弹性布局Flexbox

    Flex布局主要思想是：让容器有能力让其子项目能够改变其宽度、高度（甚至是顺序），以最佳方式填充可用空间

    容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴;默认值是竖直轴(column)方向

    在React Native中，有4个容器属性，2个项目属性，分别是：

        容器属性：flexDirection   flexWrap   justifyContent  alignItems

        项目属性：flex  alignSelf

    flexDirection容器属性: `row | row-reverse | column | column-reverse`

        该属性决定主轴的方向（即项目的排列方向）。

        row：主轴为水平方向，起点在左端。

        row-reverse：主轴为水平方向，起点在右端。

        column(默认值)：主轴为垂直方向，起点在上沿。

        column-reverse：主轴为垂直方向，起点在下沿。

    flexWrap容器属性: `nowrap | wrap | wrap-reverse`

        默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

        nowrap(默认值)：不换行

        wrap：换行，第一行在上方

        wrap-reverse：换行，第一行在下方。（和wrap相反）

    justifyContent容器属性:`flex-start | flex-end | center | space-between | space-around`

        定义了伸缩项目在主轴线的对齐方式

        flex-start(默认值)：伸缩项目向一行的起始位置靠齐。

        flex-end：伸缩项目向一行的结束位置靠齐。

        center：伸缩项目向一行的中间位置靠齐。

        space-between：两端对齐，项目之间的间隔都相等。

        space-around：伸缩项目会平均地分布在行里，两端保留一半的空间。

    alignItems容器属性:`flex-start | flex-end | center | baseline | stretch`

        定义项目在交叉轴上如何对齐，可以把其想像成侧轴（垂直于主轴）的“对齐方式”。

        flex-start：交叉轴的起点对齐。

        flex-end：交叉轴的终点对齐 。

        center：交叉轴的中点对齐。

        baseline：项目的第一行文字的基线对齐。

        stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

    flex项目属性:

    “flex-grow”、“flex-shrink”和“flex-basis”三个属性的缩写，

    其中第二个和第三个参数（flex-shrink、flex-basis）是可选参数。默认值为“0 1 auto”。

    自身相对于父容器的权重占比

    alignSelf项目属性:

    “auto | flex-start | flex-end | center | baseline | stretch”

    align-self属性交叉轴允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

    默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。