React-native: Wie man Listenzeilen entfernt?

Ich React Native mit, ich will Zeilen aus der Liste entfernen, aber ich kann nicht, ich gesetzt borderBottomWidth auf 0, aber es hat nicht funktioniert, das ist mein Code:React-native: Wie man Listenzeilen entfernt?

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' 
} 
})

Dies ist die Ausgabe:

ich setze noLines und noBottomBorder als Stütze, aber sie funktionieren nicht, wenn i ottomBorderWidth:2 gesetzt unter dem Strich Größenzunahme in Breite und Höhe, ist diese Zeilen in der Liste sein muss, oder es wird jede eay es zu entfernen?

Quelle

2017-10-12 Al-shimaa Adel

Versuchen Sie, borderBottomWidth:0 in <List> statt <ListItem> wie unten anzuwenden.

<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> 
    ); 
    }} 
    />

Quelle

2017-10-12 08:32:45

Ich verwende es in der Liste, aber ich habe die gleiche Ausgabe –

borderBottomWidth:0 zu ListItem und Body Nehmen. Wenn es keine Body gibt, dann sollte ListItem gut genug sein.

Quelle

2017-10-19 04:10:41 Simon

Für Ihren speziellen Fall stellen Sie einfach borderColor:white ein.

Quelle

2017-10-19 05:09:21

React-native: Wie man Listenzeilen entfernt?

Antwort

Verwandte Themen