Question

我试图给我的卡片加上一些阴影和高度，但它显示的错误是＃34;提升＆＃34;不是有效的样式属性......当我添加样式高程时，此错误将显示为高程

/**
 * Created by Yasi Ahmed on 05-12-2015.
 */
'use strict';

var React = require('react-native');
var BloggerApi = require('./BloggerApi');
var HTMLView = require('react-native-htmlview');
var striptags = require('striptags');
var moment = require('moment');


var {
    ListView,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    } = React;

var PostListView = React.createClass({
    getInitialState: function () {
        return {
            dataSource: new ListView.DataSource({
                rowHasChanged: (row1, row2) => row1 !== row2,
            }),
            loaded: false,
        };
    },
    fetchData: function () {
        var items = require("./dummy/posts.json");
        this.setState({
            dataSource: this.state.dataSource.cloneWithRows(items.items),
            loaded: true
        });
        /*
         BloggerApi.fetchPosts()
         .then((responseData) => {
         this.setState({
         dataSource: this.state.dataSource.cloneWithRows(responseData.items),
         loaded: true
         });
         })
         .done();
         */
    },
    componentDidMount: function () {
        this.fetchData();
    },
    render: function () {
        if (!this.state.loaded) {
            return this.renderLoadingView();
        } else {
            console.log(this.state)
        }

        return (
            <ListView
                dataSource={this.state.dataSource}
                renderRow={this.renderPostItem}
                style={styles.listView}
            />
        );
    },
    /*
     <CoreShadowView cornerRadius={4} shadowRadius={4} style={[{backgroundColor: '#FFFFFF'}]}>
     <Text>D. 完全知道</Text>
     </CoreShadowView>
     */


    renderPostItem: function (post) {

        return (
            <TouchableOpacity>
                <View style={styles.rightContainer}>
                    <Text style={styles.title}>{post.title}</Text>
                    <View style={styles.content}>
                        <Text>
                            {striptags(post.content).substring(0, 100)}........
                        </Text>
                    </View>
                    <View style={styles.bottomContainer}>
                        <Text style={styles.date}>{moment(post.published).format("MMM Do YY, h:mm a")}</Text>
                        <Text style ={styles.read_more}>Read more...</Text>
                    </View>
                </View>

            </TouchableOpacity>
        );
    },
    renderLoadingView: function () {
        return (
            <View style={styles.container}>
                <Text>
                    Loading posts...
                </Text>
            </View>
        );
    }
});

var styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'


    },
    rightContainer: {
        borderWidth: .5,
        borderColor: '#000',
        paddingLeft: 15,
        paddingRight: 15,
        flex: 1,
        marginBottom:5,
        marginLeft:5,
        marginRight:5,
        borderRadius: 4,
        borderTopLeftRadius: 3,
        borderTopRightRadius: 3,
        borderBottomLeftRadius: 3,
        borderBottomRightRadius: 3,
        shadowColor: '#000',
        shadowOffset: {width: 2, height: 2},
        shadowOpacity: 1,
        shadowRadius: 5,
        elevation: 10

    },
    bottomContainer: {
        flexDirection: 'row',
        paddingLeft: 15
    },
    title: {
        fontSize: 20,
        marginBottom: 8,
        textAlign: 'center'
    },
    date: {
        paddingLeft: 25,
        fontSize: 14,
        color: '#2196f3',
        marginBottom: 8

    },
    read_more: {
        paddingRight: 50,
        textAlign: 'right',
        fontSize: 14,
        color: '#2196f3'


    },
    content: {
        paddingLeft: 25,
        height: 100,
        paddingRight: 25
    },
    listView: {
        paddingTop: 20,
        backgroundColor: '#F5FCFF'
    }
});

module.exports = PostListView;

Answer 1

提升不是React Native中支持的CSS样式。有关支持的属性列表，请参阅https://facebook.github.io/react-native/docs/style.html#supported-properties

不变违规：＆＃34;海拔＆＃34;不是有效的样式属性

1 个答案: