React Native flexbox justifycontent, alignitems flexible application

First, in the React Native Flexbox has

Flex:1 its child elements have the same length

Justifycontent Vertical Layout

Alignitems Horizontal Layout

Flexdirction row (Landscape) Colum (portrait) Overall direction

Justifycontent (The relationship between child elements and child elements) Flex-start Center Flex-end space-around Space-between Sub-

Alignitems determines the position of your control in the vertical left or right of the screen Flex-start (left or top) center flex-end (on or off) stretch

Component {
    render () {
        (
            <view style={{width: ' 33% '}}>
                <image source={require ('./ 8.jpg ')} style={{alignself: ' Center ', height:100,justifycontent: ' Center '}}>
                    <text style={{fontsize:20, Color: ' Red ', Opacity:1.0,textalign: ' Center '}}> Chao </Text>
                </Image>

            </View>
        )
    }
}
 Component {render () {(<view style={{ 
        
        flex:1,
        Flexdirection: ' Row ',
        justifycontent: ' Center ',
        alignitems: ' Flex-end ',
      }}>
                <item/>
                <item  />
                <item  />
            </View>
        )
    }
}