时间戳

首页 > 解决方案 > 嗨，我是 React Native 的新手，使用 Native-base 我正在尝试设计卡片视图

react-native - 嗨，我是 React Native 的新手，使用 Native-base 我正在尝试设计卡片视图

问题描述

视图会这样在此处输入图像描述][2][！[我在卡内遇到问题，能够看到描述部分我正在尝试实现它位于图像下方，实际上它应该位于图像旁边`

<ListItem>
                  <Card
                    style={{
                      marginTop: 0,
                      marginBottom: 0,
                      marginRight: 0,
                      marginLeft: 0,
                      borderTopLeftRadius: 8,
                      borderTopRightRadius: 8,
                      flexDirection: 'row',
                    }}>
                     <View style={{flex: 1}}>
                          <CardItem>
                            <Thumbnail
                              source={require('../../assets/images/restaurant_128.png')}
                            />
                          </CardItem>
                        </View>
                        <View style={{flex: 3, flexDirection: 'column'}}>
                          <CardItem>
                            <Body>
                              <Text>{item.Title}</Text>
                              <Text style={{backgroundColor: 'green'}}>
                                {item.Description}
                              </Text>
                            </Body>
                          </CardItem>
                        </View
                      </Card>
                    </ListItem>

`

标签： react-nativenative-base

解决方案

尝试这个：-

                    <View style={{
                        flexDirection: "row",
                        justifyContent: "flex-start",
                        alignItems: "center",
                        backgroundColor: "#B8B2B2",
                        width: "100%",
                        height: 100
                    }}>
                        <View style={{
                            width: "30%",
                            backgroundColor: "red",
                            height: 100
                        }}>
                            <Text>left image here</Text>
                        </View>
                        <View style={{
                            width: "70%",
                            backgroundColor: "#B8B2B2",
                            height: 100
                        }}>
                            <View style={{
                                flexDirection: "row",
                                justifyContent: "space-between",
                                alignItems: "center",
                                backgroundColor: "#fff",
                                height: 50
                            }}>
                                <View style={{
                                    width: "30%",
                                    backgroundColor: "teal",
                                    height: 50
                                }}>
                                    <Text>lamb samosa</Text>
                                </View>
                                <View style={{
                                    width: "30%",
                                    backgroundColor: "teal",
                                    height: 50
                                }}>
                                    <Text>$4.5</Text>
                                </View>
                            </View>
                            <View style={{
                                width: "100%",
                                backgroundColor: "#B8B2B2",
                                height: 50
                            }}>
                                <Text>Lorem Ipsum</Text>
                            </View>
                        </View>
                    </View>

推荐阅读