美文网首页
菜鸟学习RN之路---控件排版

菜鸟学习RN之路---控件排版

作者: wervy | 来源:发表于2021-03-25 15:47 被阅读0次

    一行展示2个控件,一个居右,一个居中,类似下图这种


    image.png

    现在最外面设置一个横向布局,中间的控件居中用justifyContent和alignItems展示,右边的控件居右,使用绝对布局,right: 4,距离右边边缘4个单元

    代码如下:

    <View
                            style={{
                                backgroundColor: "#fff",
                                height: 40,
                                flexDirection: "row",
                                // justifyContent: "space-around",
                            }}
                        >
                            <View
                                style={[
                                    {
                                        justifyContent: "center",                                  
                                        alignItems: "center",
                                        flex:1
                                    },
                                ]}
                            >
                                <Text
                                    style={{
                                        fontWeight: "bold",
                                        fontSize: 13,
                                        textAlign: "center",
                                    }}
                                    numberOfLines={2}
                                >
                                    {'测试'}
                                </Text>
                            </View>
           
                            
                            <View style={{
                               justifyContent: "center",
                                alignItems:'center',
                                right: 4,
                                position: 'absolute',
                            }}>
                                    <Image
                                        source={imageDown}
                                        style={{ height: 20, width: 20,marginLeft:20 }}
                                    ></Image>
                                </View>
                        </View>
    

    相关文章

      网友评论

          本文标题:菜鸟学习RN之路---控件排版

          本文链接:https://www.haomeiwen.com/subject/pufrhltx.html