Question

我正在使用React Native，我想从列表中删除行但我不能，我将borderBottomWidth设置为0但它不起作用，这是我的代码：

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}>Nima33@gmail.com</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宽度和高度的底线大小增加，这些行是否必须在列表中还是有任何可以删除它？

Answer 1

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

Answer 2

您应将 noBorder 设置为prop：<ListItem noBorder>。

Answer 3

将borderBottomWidth:0应用于ListItem和Body。如果没有Body，则ListItem应该足够好。

Answer 4

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

Answer 5

您可以在bottomDivider组件中将属性false设置为ListItem。

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

5 个答案: