如何将样式应用于每个 ListItem Native-base

Question

我有一个数组：

const routes = [
  { id: 1, title: 'Home', image: 'home', cstyle: 'styles.ItemsDrawer' },
  { id: 2, title: 'Chat', image: 'flask', cstyle: 'styles.ItemsDrawer' },
  { id: 3, title: 'Profile', image: 'briefcase', cstyle: 'styles.ItemsDrawer' },
  { id: 5, title: 'Logout', image: 'log-out', cstyle: 'styles.logout' }
];

并希望将不同风格应用于某些项目，

<List dataArray={routes}
   renderRow={(data) =>
   <ListItem style={data.cstyle} 
     button onPress={() => ctx.navigate(data.title)} icon> 
   </ListItem>}>
</List>

但我认为传递 "data.cstyle" 需要一个名称并尝试在部分样式表中找到它的样式，但这无法识别并且没有样式列表 dynamic

中的每个项目

或者如何对列表中的某些项目应用不同的样式

Answer 1

为 <List/>

中的每个 <ListItem/> 应用不同的样式

import React, { Component } from 'react';
import { StyleSheet } from 'react-native'
import { Container, Header, Content, List, ListItem, Text } from 'native-base';

const styles = StyleSheet.create({
  itemOne: { backgroundColor: 'red', marginLeft: 0 },
  itemTwo: { backgroundColor: 'blue', marginLeft: 0 },
  itemThree: { backgroundColor: 'green', marginLeft: 0 },
  itemFour: { backgroundColor: 'violet', marginLeft: 0 },

})
const routes = [
  { id: 1, title: 'Home', image: 'home', cstyle: styles.itemOne },
  { id: 2, title: 'Chat', image: 'flask', cstyle: styles.itemTwo },
  { id: 3, title: 'Profile', image: 'briefcase', cstyle: styles.itemThree },
  { id: 5, title: 'Logout', image: 'log-out', cstyle: styles.itemFour }
];
export default class App extends Component {
  render() {
    return (
      <Container>
        <Header />
        <Content>
          <List dataArray={routes}
            renderRow={(data) =>
              <ListItem style={data.cstyle}
                button icon><Text>{data.id}. {data.title}</Text>
              </ListItem>}>
          </List>
        </Content>
      </Container>
    );
  }

图片

如何将样式应用于每个 ListItem Native-base

how applied styles to each ListItem Native-base

react-native-android

native-base

react-native-ios