ListView UI 看起来不像预期的那样。（本机基础）

Question

为什么左灰度边距很丑？我尝试了许多不同的列表，但它仍在打印左侧灰色边距。这很常见吗？

我遵循了 Native-base 文档：http://docs.nativebase.io/Components.html#list-avatar-headref

import { Container, Content, List, ListItem, Text, Left, Body, Thumbnail } from 'native-base';
import { View, AsyncStorage } from 'react-native';

...
render() { 
   return (
     <View style={{flex:1}}>
        <Content>
          <List>
            {this._renderProfile()}
            <ListItem>
              <Left>
                <Text>! Edit Profile</Text>
              </Left>
            </ListItem>
            <ListItem onPress={this._changePassword}>
              <Left>
                <Text>Change Password </Text>
              </Left>
            </ListItem>

            <ListItem>
              <Left>
                <Text>! Language Setting</Text>
              </Left>
            </ListItem>

            <ListItem onPress={this._showModal}>
              <Left>
                <Text>Logout</Text>
              </Left>
            </ListItem>
          </List>
        </Content>
        {this._drawModal()}
      </View>

p.s UI 你喜欢使用 Native-Base 吗？

Answer 1

我是这样使用的：

render() {
        return (
            <ListItem style={{marginLeft: -15, paddingLeft: 15}}>
                <Left>
                    <Text>! Language Setting</Text>
                </Left>
            </ListItem>
        );
    }

并且您应该添加头像或图标。例如：<ListItem icon | avatart />

Answer 2

我用过这个，但对我来说效果很好。我认为你应该检查你的父文件是否有左边距。所以我更喜欢 100% 父级宽度。

ListView UI 看起来不像预期的那样。（本机基础）

ListView UI doesn't look as expected.(Native-Base)

user-interface

reactjs

react-native

native-base