android - 样式在 React Native 中无法正常工作

Question

我正在学习使用 React Native 开发 Android 应用程序的教程 但是有一些奇怪的样式问题

1. 不显示边框
2. 第一行没有顶部填充
3. 侧滚动条居中

这是我的代码:

import React, { Component } from 'react';
import {
  AppRegistry,
  ListView,
  StyleSheet,
  Text,
  View
} from 'react-native';

class SimpleList extends Component {
    constructor(props) {
        super(props);

        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource: ds.cloneWithRows(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'])
        };
    }

    _renderRow(rowData) {
        return <Text style={styles.row}>{rowData}</Text>
    }

    render() {
        return (<View style={styles.container}>
            <ListView
                dataSource={this.state.dataSource}
                renderRow={(e) => this._renderRow(e)}/>
        </View>);
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  row: {
    flex: 1,
    fontSize: 24,
    padding: 42,
    borderWidth: 1,
    borderColor: '#DDDDDD'
  }
});

export default SimpleList;

我的react native版本是0.30

Answer 1

我想我已经明白了

• Top Padding 和 Border 不适用于 Text 组件，当我用 View 组件包装 Text 并改用包装器样式时它起作用
• 通过使用 contentContainerStyle 而不是 style 属性来定义样式来修复滚动条

虽然不知道为什么它在教程中有效