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删除它？

答

尝试应用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> 
    ); 
    }} 
    />

我将它应用在列表中，但我得到了相同的输出 –

答

应用borderBottomWidth:0到ListItem和Body。如果没有Body那么ListItem应该足够好。

答

对于您的具体情况，只需设置borderColor:white。

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

相关推荐