如何将样式应用于每个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"它会采取一个名称,并尝试在节样式表中找到它的样式,但这不能识别并保留没有样式到列表动态的每个项目

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

Answer 1

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

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

图片