的ListView UI看起来并不如预期。（本机库）

问题描述：

为什么显示丑左边灰色保证金？我尝试了许多不同的列表，它仍然打印左边的灰色边缘。这是常见的吗？

我跟本机基本文档：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？

答

我用这样的：

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

，你应该添加头像或图标。 exm：<ListItem icon | avatart />

太棒了！有效！你是怎么想到marginLeft和paddingLeft分别为-15和15的？ '15'是否适用于所有移动设备？ –

剩下15个空间是跨平台的。方法正常工作。我也在使用。 –

答

我已经使用这个，但它的工作对我很好。我想你应该检查你的父文件，如果在左边的保证金。所以我更喜欢100％父宽度。

这不是一个答案，它是一个评论。或者为你的意思添加更多解释。 – user5014677

我检查了我的父文件，但实际上这是连接到根，所以你的答案不计算在这个问题上！虽然谢谢！ –

的ListView UI看起来并不如预期。（本机库）

相关推荐