React-native：如何刪除列表行？

我使用React Native，我想刪除列表從線條，但我不能，我設置borderBottomWidth爲0，但它沒有工作，這是我的代碼：React-native：如何刪除列表行？

import React from "react"; 
import { AppRegistry, Image, ImageBackground, StatusBar, StyleSheet, View, 
FlatList } from "react-native"; 
import { Container, Content, Text, List, ListItem, Icon, Left, Body, Right, 
} from "native-base"; 
const routes = [{"title":"Specials","icon":"menu"}, {"title": 
"Home","icon":"home"}, {"title":"Shopping Cart","icon":"cart"}, 
      {"title":"Wishlist","icon":"heart"},{"title":"My 
    Orders","icon":"menu"},{"title":"Categories","icon":"list"}, 
      {"title":"Gift Vouchers","icon":"menu"}, 
    {"title":"Affiliates","icon":"menu"},{"title":"Returns","icon":"menu"}, 
      {"title":"My Account","icon":"menu"}, 
    {"title":"Settings","icon":"menu"}, {"title":"Contact 
    Us","icon":"menu"}, 
      {"title":"About","icon":"menu"},{"title":"Service 
     Center","icon":"menu"}, 
      {"title":"Rate Us On Google Play","icon":"menu"}, 
     {"title":"Logout","icon":"menu"}]; 

export default class SideBar extends React.Component { 
render() { 
    return (
    <Container> 
    <Content> 
     <ImageBackground source={require('../../assets/nav.png')} style={{ 
      height: 150, 
      alignSelf: "stretch", 
      alignItems: "center", 
      flexDirection:'row' 
     }}> 
     <Image 
      style={{ height: 80, width: 80, borderRadius: 64, marginLeft: 25}} 
      source={{ 
      uri: "http://safe- 
       pay.co/safepay/public/uploadedimg/user/avatar.png" 
      }} 
      /> 
      <View style={{flexDirection: 'column', marginLeft: 25}}> 
      <Text style= {{color: 'white'}}>Nima</Text> 
      <Text style={styles.emailText}>[email protected]</Text> 
     </View> 
     </ImageBackground> 
     <List 
     dataArray={routes} 
     renderRow={data => { 
      return (
      <ListItem 
       style={{borderBottomWidth: 0}} 
       button 
       onPress={() => this.props.navigation.navigate(data.title)} 
       icon> 
       <Left> 
       <Icon name={data.icon} style={{color:'gray'}}/> 
       </Left> 
       <Body> 
       <Text>{data.title}</Text> 
       </Body> 
      </ListItem> 
     ); 
     }} 
     /> 
    </Content> 
    </Container> 
); 
} 
} 

const styles = StyleSheet.create({ 
emailText: { 
    fontSize: 12, 
    color: 'white' 
} 
})

這是輸出：

我設置noLines和noBottomBorder作爲道具，但他們沒有工作，如果我在寬度和高度設置ottomBorderWidth:2底線尺寸的增加，在這些線路必須使用列表或有任何EAY刪除它？

來源

2017-10-12 Al-shimaa Adel

嘗試應用borderBottomWidth:0在<List>而不是<ListItem>（如下所示）。

<List 
    dataArray={routes} 
    containerStyle={borderBottomWidth: 0} 
    renderRow={data => { 
     return (
     <ListItem 
      style={{borderBottomWidth: 0}} 
      button 
      onPress={() => this.props.navigation.navigate(data.title)} 
      icon> 
      <Left> 
      <Icon name={data.icon} style={{color:'gray'}}/> 
      </Left> 
      <Body> 
      <Text>{data.title}</Text> 
      </Body> 
     </ListItem> 
    ); 
    }} 
    />

來源

2017-10-12 08:32:45

我將它應用在列表中，但我得到了相同的輸出 –

應用borderBottomWidth:0到ListItem和Body。如果沒有Body那麼ListItem應該足夠好。

來源

2017-10-19 04:10:41 Simon

對於您的具體情況，只需設置borderColor:white。

來源

2017-10-19 05:09:21

React-native：如何刪除列表行？

回答

相關問題