如何将样式应用于每个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>

但我认为传递＆＃34; data.cstyle＆＃34;它将采用一个名称并尝试在部分样式表中找到它的样式，但是这不能识别并且没有样式而没有样式来自列表动态

或如何将不同的样式应用于列表

中的某些项目

Answer 1

为<ListItem/>

中的每个<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>
    );
  }

图像