Question

我正在尝试使用最后一个子选择器从此处的最后一个Text标记中删除底部边框。我同时使用了EStyleSheet和StyleSheet，但似乎无法正常工作-最后一个Text标签仍然具有底部边框。

我将Text标记包装在View中，然后将'opt'样式应用于View，这也不起作用。我在做什么错了？

import React from 'react';
import EStyleSheet from 'react-native-extended-stylesheet';
import {
    Text,
    View,
    Image,
} from 'react-native';
EStyleSheet.build()
const styles = EStyleSheet.create({
    container:{
        flex:1,
    },
    options:{
    },
    opt:{
        padding:5,
        fontSize:25,
        borderWidth:1,
        borderColor:'black',
    },
    'opt:last-child': {
        borderBottomWidth:0,
    }
});


const Settings = () => {
    return <View style={styles.container}>
            <View style={styles.options}>
                <Text style={styles.opt}>Edit profile</Text>
                <Text style={styles.opt}>Preferences</Text>
                <Text style={styles.opt}>Account settings</Text>
            </View>
        </View>
};


export default Settings;

Answer 1

要完成项目顺序识别样式，请尝试使用EstyleSheet.child这样的方法：

const items = ['Edit profile', 'Preferences', 'Account settings'];


   const Settings = () => (
      <View style={styles.container}>
        <View style={styles.options}>
          {items.map((text, i) => {
            const style = EStyleSheet.child(styles, 'opt', i, items.length);
            return <Text style={style}>{text}</Text>;
          })}
        </View>
      </View>
    );

React Native最后一个子选择器不起作用

1 个答案: