探索React Native实战：新闻应用Demo

import React, { Component } from 'react';
import { Text, View, StyleSheet, Image, TouchableOpacity } from 'react-native';
 
export default class NewsApp extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Image source={require('./assets/logo.png')} style={styles.logo} />
          <TouchableOpacity style={styles.button}>
            <Text style={styles.buttonText}>Login</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.content}>
          {/* 新闻列表组件 */}
        </View>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F5F5',
  },
  header: {
    height: 100,
    backgroundColor: '#333',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 15,
  },
  logo: {
    width: 80,
    height: 80,
    resizeMode: 'contain',
  },
  button: {
    backgroundColor: '#0076FF',
    paddingHorizontal: 10,
    paddingVertical: 5,
    borderRadius: 5,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
  },
  content: {
    // 新闻列表的样式
  },
});

这个代码实例展示了如何在React Native应用中创建一个简单的新闻应用头部，包括logo和登录按钮。同时，它提供了样式表的基本样式定义，展示了如何在React Native中布局和样式化一个组件。这个例子是学习React Native布局和样式的一个很好的起点。