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

【问题标题】：how applied styles to each ListItem Native-base如何将样式应用于每个 ListItem Native-base
【发布时间】：2018-01-07 21:18:28
【问题描述】：

我有一个数组，所以：

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”它会取一个名称并尝试在部分样式表中找到它的样式，但这不能识别并且没有样式到列表动态中的每个项目

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

【问题讨论】：

标签： react-native-android react-native-ios native-base

【解决方案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>
    );
  }

图片

【讨论】：