feat: initial commit - GitHub Stars Manager
This commit is contained in:
EchoZenith
659
screens/RepoDetailScreen.js
Normal file
659
screens/RepoDetailScreen.js
Normal file
@@ -0,0 +1,659 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import {
|
||||
View, Text, StyleSheet, TouchableOpacity, ScrollView,
|
||||
ActivityIndicator, Image, Linking, Platform, BackHandler, InteractionManager, Dimensions
|
||||
} from 'react-native';
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import Markdown from 'react-native-markdown-display';
|
||||
import SyntaxHighlighter from 'react-native-syntax-highlighter';
|
||||
import { vs2015 } from 'react-syntax-highlighter/styles/hljs';
|
||||
import { fetchReadme, TokenExpiredError } from '../services/github';
|
||||
import { getGitHubToken } from '../services/database';
|
||||
|
||||
const SCREEN_WIDTH = Dimensions.get('window').width;
|
||||
|
||||
// 检测是否为 SVG 图片链接（React Native Image 组件不支持 SVG）
|
||||
function isSvgUrl(url) {
|
||||
return /\.svg(\?|#|$)/i.test(url) || /\/svg(\?|#|$)/i.test(url);
|
||||
}
|
||||
|
||||
// SVG 图片占位组件：点击后在系统浏览器中打开原始 SVG 文件
|
||||
function SvgImage({ uri, alt }) {
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={svgStyles.container}
|
||||
onPress={() => Linking.openURL(uri)}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={svgStyles.placeholder}>
|
||||
<Ionicons name="image-outline" size={28} color="#999" />
|
||||
<Text style={svgStyles.placeholderText} numberOfLines={1}>
|
||||
{alt || 'SVG 图片'}
|
||||
</Text>
|
||||
<View style={svgStyles.badge}>
|
||||
<Ionicons name="open-outline" size={12} color="#fff" />
|
||||
<Text style={svgStyles.badgeText}>浏览器查看</Text>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
|
||||
const svgStyles = StyleSheet.create({
|
||||
container: {
|
||||
width: '100%',
|
||||
marginBottom: 12,
|
||||
borderRadius: 8,
|
||||
overflow: 'hidden',
|
||||
borderWidth: 1,
|
||||
borderColor: '#e1e4e8',
|
||||
},
|
||||
placeholder: {
|
||||
height: 80,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#f6f8fa',
|
||||
gap: 4,
|
||||
},
|
||||
placeholderText: {
|
||||
fontSize: 13,
|
||||
color: '#666',
|
||||
},
|
||||
badge: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#0366d6',
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 3,
|
||||
borderRadius: 10,
|
||||
gap: 3,
|
||||
},
|
||||
badgeText: {
|
||||
fontSize: 11,
|
||||
color: '#fff',
|
||||
},
|
||||
});
|
||||
|
||||
// 根据图片设备像素自动计算合适的高度，避免固定宽高比导致 SVG 徽章变形
|
||||
function ReadmeImage({ src, alt }) {
|
||||
const [dimensions, setDimensions] = useState(null);
|
||||
const isSvg = isSvgUrl(src);
|
||||
|
||||
if (isSvg) {
|
||||
return <SvgImage uri={src} alt={alt} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Image
|
||||
source={{ uri: src }}
|
||||
style={[
|
||||
readmeImageStyles.image,
|
||||
dimensions
|
||||
? { width: '100%', height: dimensions.height, aspectRatio: undefined }
|
||||
: { width: '100%', height: 220 },
|
||||
]}
|
||||
resizeMode="contain"
|
||||
onLoad={(e) => {
|
||||
const { width, height } = e.nativeEvent.source;
|
||||
if (width && height) {
|
||||
const maxWidth = SCREEN_WIDTH - 56;
|
||||
const ratio = Math.min(maxWidth / width, 1);
|
||||
setDimensions({ width: maxWidth, height: height * ratio });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const readmeImageStyles = StyleSheet.create({
|
||||
image: {
|
||||
maxWidth: '100%',
|
||||
borderRadius: 6,
|
||||
marginBottom: 12,
|
||||
},
|
||||
});
|
||||
|
||||
function preprocessMarkdown(markdown, repoFullName, defaultBranch) {
|
||||
if (!markdown) return markdown;
|
||||
|
||||
const [owner, repo] = repoFullName.split('/');
|
||||
const branch = defaultBranch || 'main';
|
||||
const rawBaseUrl = `https://raw.githubusercontent.com/${owner}/${repo}/${branch}`;
|
||||
const githubBaseUrl = `https://github.com/${owner}/${repo}/blob/${branch}`;
|
||||
|
||||
let processed = markdown;
|
||||
|
||||
// Remove <picture> and <source> tags, keep their content
|
||||
processed = processed.replace(/<picture[^>]*>/gi, '');
|
||||
processed = processed.replace(/<\/picture>/gi, '');
|
||||
processed = processed.replace(/<source[^>]*\/?>/gi, '');
|
||||
|
||||
// Convert <a><img>...</a> to markdown link-wrapped image first
|
||||
processed = processed.replace(
|
||||
/<a\s+[^>]*href=["']([^"']*)["'][^>]*>\s*(<img[^>]*>)\s*<\/a>/gi,
|
||||
(match, href, imgTag) => {
|
||||
const srcMatch = imgTag.match(/src\s*=\s*["']([^"']*)["']/i);
|
||||
const altMatch = imgTag.match(/alt\s*=\s*["']([^"']*)["']/i);
|
||||
const src = srcMatch ? srcMatch[1] : '';
|
||||
const alt = altMatch ? altMatch[1] : 'image';
|
||||
return `[](${href})`;
|
||||
}
|
||||
);
|
||||
|
||||
// Convert remaining standalone HTML <img> tags to markdown image syntax
|
||||
processed = processed.replace(
|
||||
/<img\s+[^>]*src\s*=\s*["']([^"']*)["'][^>]*\/?>/gi,
|
||||
(match, src) => {
|
||||
const altMatch = match.match(/alt\s*=\s*["']([^"']*)["']/i);
|
||||
const alt = altMatch ? altMatch[1] : 'image';
|
||||
return ``;
|
||||
}
|
||||
);
|
||||
|
||||
// Convert remaining HTML <a> tags to markdown link syntax
|
||||
processed = processed.replace(
|
||||
/<a\s+[^>]*href\s*=\s*["']([^"']*)["'][^>]*>([^<]*)<\/a>/gi,
|
||||
(match, href, text) => `[${text.trim()}](${href})`
|
||||
);
|
||||
|
||||
// Strip remaining HTML tags
|
||||
processed = processed.replace(/<[^>]*>/g, '');
|
||||
|
||||
// Resolve relative URLs in markdown images () and links ([text](url))
|
||||
processed = processed.replace(
|
||||
/(!)?\[([^\]]*)\]\(([^)]+)\)/g,
|
||||
(match, isImage, text, url) => {
|
||||
if (url.startsWith('http://') || url.startsWith('https://') || url.startsWith('mailto:')) {
|
||||
return match;
|
||||
}
|
||||
const baseUrl = isImage ? rawBaseUrl : githubBaseUrl;
|
||||
const cleanUrl = url.replace(/^(\.\/|\/)/, '');
|
||||
const resolvedUrl = `${baseUrl}/${cleanUrl}`;
|
||||
return `${isImage || ''}[${text}](${resolvedUrl})`;
|
||||
}
|
||||
);
|
||||
|
||||
return processed;
|
||||
}
|
||||
|
||||
function detectLanguage(content) {
|
||||
const firstLine = content.split('\n')[0].trim();
|
||||
const knownLanguages = {
|
||||
js: 'javascript', jsx: 'javascript', mjs: 'javascript',
|
||||
ts: 'typescript', tsx: 'typescript',
|
||||
py: 'python', rb: 'ruby', rs: 'rust', go: 'go',
|
||||
java: 'java', kt: 'kotlin', swift: 'swift',
|
||||
c: 'c', cpp: 'cpp', cs: 'csharp',
|
||||
html: 'xml', htm: 'xml', xml: 'xml',
|
||||
css: 'css', scss: 'css', less: 'css',
|
||||
sh: 'bash', bash: 'bash', zsh: 'bash', powershell: 'powershell',
|
||||
json: 'json', yml: 'yaml', yaml: 'yaml',
|
||||
sql: 'sql', php: 'php', r: 'r', dart: 'dart',
|
||||
diff: 'diff', dockerfile: 'dockerfile', graphql: 'graphql',
|
||||
};
|
||||
const ext = firstLine.replace('```', '').toLowerCase();
|
||||
return knownLanguages[ext] || ext || 'bash';
|
||||
}
|
||||
|
||||
const markdownStyles = {
|
||||
body: {
|
||||
color: '#24292e',
|
||||
fontSize: 15,
|
||||
lineHeight: 24,
|
||||
padding: 16,
|
||||
},
|
||||
heading1: {
|
||||
fontSize: 22,
|
||||
fontWeight: '700',
|
||||
marginTop: 20,
|
||||
marginBottom: 10,
|
||||
paddingBottom: 8,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#e1e4e8',
|
||||
},
|
||||
heading2: {
|
||||
fontSize: 18,
|
||||
fontWeight: '600',
|
||||
marginTop: 18,
|
||||
marginBottom: 8,
|
||||
paddingBottom: 6,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#e1e4e8',
|
||||
},
|
||||
heading3: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
marginTop: 16,
|
||||
marginBottom: 6,
|
||||
},
|
||||
heading4: {
|
||||
fontSize: 15,
|
||||
fontWeight: '600',
|
||||
marginTop: 14,
|
||||
marginBottom: 4,
|
||||
},
|
||||
paragraph: {
|
||||
marginBottom: 12,
|
||||
},
|
||||
list_item: {
|
||||
marginBottom: 4,
|
||||
},
|
||||
bullet_list: {
|
||||
paddingLeft: 24,
|
||||
marginBottom: 12,
|
||||
},
|
||||
ordered_list: {
|
||||
paddingLeft: 24,
|
||||
marginBottom: 12,
|
||||
},
|
||||
code_inline: {
|
||||
backgroundColor: 'rgba(27,31,35,0.05)',
|
||||
paddingHorizontal: 5,
|
||||
paddingVertical: 2,
|
||||
borderRadius: 3,
|
||||
fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
|
||||
fontSize: 13,
|
||||
color: '#d73a4a',
|
||||
},
|
||||
code_block: {
|
||||
backgroundColor: '#f6f8fa',
|
||||
padding: 12,
|
||||
borderRadius: 6,
|
||||
marginBottom: 12,
|
||||
fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
|
||||
fontSize: 13,
|
||||
},
|
||||
fence: {
|
||||
backgroundColor: '#f6f8fa',
|
||||
padding: 12,
|
||||
borderRadius: 6,
|
||||
marginBottom: 12,
|
||||
fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
|
||||
fontSize: 13,
|
||||
},
|
||||
blockquote: {
|
||||
paddingLeft: 12,
|
||||
color: '#6a737d',
|
||||
borderLeftWidth: 4,
|
||||
borderLeftColor: '#dfe2e5',
|
||||
marginBottom: 12,
|
||||
},
|
||||
link: {
|
||||
color: '#0366d6',
|
||||
textDecorationLine: 'underline',
|
||||
},
|
||||
table: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#dfe2e5',
|
||||
borderRadius: 4,
|
||||
marginBottom: 12,
|
||||
},
|
||||
thead: {
|
||||
backgroundColor: '#f6f8fa',
|
||||
},
|
||||
th: {
|
||||
padding: 6,
|
||||
borderWidth: 1,
|
||||
borderColor: '#dfe2e5',
|
||||
fontWeight: '600',
|
||||
},
|
||||
td: {
|
||||
padding: 6,
|
||||
borderWidth: 1,
|
||||
borderColor: '#dfe2e5',
|
||||
},
|
||||
hr: {
|
||||
backgroundColor: '#e1e4e8',
|
||||
height: 1,
|
||||
marginVertical: 20,
|
||||
},
|
||||
image: {
|
||||
maxWidth: '100%',
|
||||
height: undefined,
|
||||
borderRadius: 6,
|
||||
marginBottom: 12,
|
||||
},
|
||||
};
|
||||
|
||||
// 重写 react-native-markdown-display 的默认渲染规则
|
||||
const renderRules = {
|
||||
// 自定义图片渲染：支持 SVG 占位，普通图片自动计算尺寸
|
||||
image: (node, children, parent, styles) => {
|
||||
const { src, alt } = node.attributes;
|
||||
return (
|
||||
<ReadmeImage
|
||||
key={node.key}
|
||||
src={src}
|
||||
alt={alt}
|
||||
/>
|
||||
);
|
||||
},
|
||||
link: (node, children, parent, styles) => {
|
||||
const { href } = node.attributes;
|
||||
const childrenArr = Array.isArray(children) ? children : [children];
|
||||
const hasOnlyText = childrenArr.every(
|
||||
child => typeof child === 'string' || typeof child === 'number' || child === null
|
||||
);
|
||||
if (hasOnlyText) {
|
||||
return (
|
||||
<TouchableOpacity key={node.key} onPress={() => Linking.openURL(href)}>
|
||||
<Text style={styles.link}>{children}</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<TouchableOpacity key={node.key} onPress={() => Linking.openURL(href)}>
|
||||
{children}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
},
|
||||
fence: (node, children, parent, styles) => {
|
||||
const lang = node.sourceInfo ? node.sourceInfo.split(/\s+/)[0] : '';
|
||||
const code = node.content;
|
||||
const language = detectLanguage(lang || code);
|
||||
return (
|
||||
<View key={node.key} style={codeBlockStyles.wrapper}>
|
||||
{lang ? (
|
||||
<View style={codeBlockStyles.langBar}>
|
||||
<Text style={codeBlockStyles.langText}>{lang}</Text>
|
||||
</View>
|
||||
) : null}
|
||||
<SyntaxHighlighter
|
||||
highlighter="highlightjs"
|
||||
style={vs2015}
|
||||
PreTag={ScrollView}
|
||||
CodeTag={ScrollView}
|
||||
fontFamily={Platform.OS === 'ios' ? 'Menlo' : 'monospace'}
|
||||
fontSize={12}
|
||||
customStyle={{
|
||||
padding: 12,
|
||||
margin: 0,
|
||||
borderBottomLeftRadius: 8,
|
||||
borderBottomRightRadius: 8,
|
||||
}}
|
||||
>
|
||||
{code}
|
||||
</SyntaxHighlighter>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
const codeBlockStyles = StyleSheet.create({
|
||||
wrapper: {
|
||||
marginHorizontal: 12,
|
||||
marginBottom: 12,
|
||||
borderRadius: 8,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
langBar: {
|
||||
backgroundColor: '#2d2d2d',
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 4,
|
||||
borderTopLeftRadius: 8,
|
||||
borderTopRightRadius: 8,
|
||||
},
|
||||
langText: {
|
||||
color: '#999',
|
||||
fontSize: 11,
|
||||
fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
|
||||
},
|
||||
});
|
||||
|
||||
export default function RepoDetailScreen({ repo, onGoBack }) {
|
||||
const [readme, setReadme] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const goBackRef = useRef(onGoBack);
|
||||
goBackRef.current = onGoBack;
|
||||
|
||||
useEffect(() => {
|
||||
const onBackPress = () => {
|
||||
goBackRef.current();
|
||||
return true;
|
||||
};
|
||||
const subscription = BackHandler.addEventListener('hardwareBackPress', onBackPress);
|
||||
return () => subscription.remove();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
InteractionManager.runAfterInteractions(() => {
|
||||
loadReadme();
|
||||
});
|
||||
}, []);
|
||||
|
||||
const loadReadme = async () => {
|
||||
try {
|
||||
const token = await getGitHubToken();
|
||||
const markdown = await fetchReadme(token, repo.full_name);
|
||||
const cleaned = markdown ? preprocessMarkdown(markdown, repo.full_name, repo.default_branch) : null;
|
||||
setReadme(cleaned);
|
||||
} catch (e) {
|
||||
if (e instanceof TokenExpiredError) {
|
||||
setError('Token 已过期，请返回设置页面重新输入');
|
||||
} else {
|
||||
setError(e.message || '加载 README 失败');
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const openInBrowser = () => {
|
||||
if (repo.html_url) {
|
||||
Linking.openURL(repo.html_url);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<StatusBar style="dark" />
|
||||
<View style={styles.header}>
|
||||
<TouchableOpacity style={styles.headerBtn} onPress={onGoBack}>
|
||||
<Ionicons name="arrow-back" size={24} color="#333" />
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.headerTitle} numberOfLines={1}>
|
||||
{repo.full_name}
|
||||
</Text>
|
||||
<TouchableOpacity style={styles.headerBtn} onPress={openInBrowser}>
|
||||
<Ionicons name="open-outline" size={22} color="#0366d6" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={styles.infoCard}>
|
||||
<View style={styles.infoRow}>
|
||||
{repo.owner_avatar_url ? (
|
||||
<Image
|
||||
source={{ uri: repo.owner_avatar_url }}
|
||||
style={styles.ownerAvatar}
|
||||
/>
|
||||
) : null}
|
||||
<View style={styles.infoText}>
|
||||
<Text style={styles.repoName}>{repo.full_name}</Text>
|
||||
<Text style={styles.repoDesc} numberOfLines={3}>
|
||||
{repo.description || '暂无描述'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.statsRow}>
|
||||
<View style={styles.statItem}>
|
||||
<Text style={styles.statValue}>{repo.stargazers_count}</Text>
|
||||
<Text style={styles.statLabel}>Stars</Text>
|
||||
</View>
|
||||
<View style={styles.statItem}>
|
||||
<Text style={styles.statValue}>{repo.forks_count}</Text>
|
||||
<Text style={styles.statLabel}>Forks</Text>
|
||||
</View>
|
||||
{repo.language ? (
|
||||
<View style={styles.statItem}>
|
||||
<Text style={styles.statValue}>{repo.language}</Text>
|
||||
<Text style={styles.statLabel}>Language</Text>
|
||||
</View>
|
||||
) : null}
|
||||
<View style={styles.statItem}>
|
||||
<Text style={styles.statValue}>{repo.owner_login}</Text>
|
||||
<Text style={styles.statLabel}>Owner</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.readmeHeader}>
|
||||
<Ionicons name="book" size={16} color="#555" />
|
||||
<Text style={styles.readmeTitle}>README.md</Text>
|
||||
</View>
|
||||
|
||||
{loading ? (
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator size="large" color="#0366d6" />
|
||||
<Text style={styles.loadingText}>正在加载 README...</Text>
|
||||
</View>
|
||||
) : error ? (
|
||||
<View style={styles.loadingContainer}>
|
||||
<Ionicons name="alert-circle-outline" size={36} color="#d73a4a" />
|
||||
<Text style={styles.errorText}>{error}</Text>
|
||||
</View>
|
||||
) : readme === null ? (
|
||||
<View style={styles.loadingContainer}>
|
||||
<Ionicons name="document-text-outline" size={36} color="#ccc" />
|
||||
<Text style={styles.emptyText}>该仓库没有 README 文件</Text>
|
||||
</View>
|
||||
) : (
|
||||
<ScrollView style={styles.markdownScroll}>
|
||||
<Markdown style={markdownStyles} rules={renderRules}>
|
||||
{readme}
|
||||
</Markdown>
|
||||
</ScrollView>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#f5f5f5',
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
backgroundColor: '#fff',
|
||||
paddingTop: Platform.OS === 'ios' ? 50 : 40,
|
||||
paddingBottom: 10,
|
||||
paddingHorizontal: 8,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#e8e8e8',
|
||||
},
|
||||
headerBtn: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
headerTitle: {
|
||||
flex: 1,
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: '#1a1a1a',
|
||||
textAlign: 'center',
|
||||
},
|
||||
infoCard: {
|
||||
backgroundColor: '#fff',
|
||||
margin: 12,
|
||||
marginBottom: 0,
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
elevation: 2,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 3,
|
||||
},
|
||||
infoRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
ownerAvatar: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 22,
|
||||
marginRight: 12,
|
||||
},
|
||||
infoText: {
|
||||
flex: 1,
|
||||
},
|
||||
repoName: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: '#0366d6',
|
||||
marginBottom: 4,
|
||||
},
|
||||
repoDesc: {
|
||||
fontSize: 13,
|
||||
color: '#666',
|
||||
lineHeight: 18,
|
||||
},
|
||||
statsRow: {
|
||||
flexDirection: 'row',
|
||||
marginTop: 14,
|
||||
paddingTop: 12,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#f0f0f0',
|
||||
justifyContent: 'space-around',
|
||||
},
|
||||
statItem: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
statValue: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#333',
|
||||
},
|
||||
statLabel: {
|
||||
fontSize: 11,
|
||||
color: '#999',
|
||||
marginTop: 2,
|
||||
},
|
||||
readmeHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 8,
|
||||
gap: 6,
|
||||
},
|
||||
readmeTitle: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#555',
|
||||
},
|
||||
loadingContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: 20,
|
||||
},
|
||||
loadingText: {
|
||||
marginTop: 10,
|
||||
color: '#888',
|
||||
fontSize: 14,
|
||||
},
|
||||
errorText: {
|
||||
marginTop: 10,
|
||||
color: '#d73a4a',
|
||||
fontSize: 14,
|
||||
textAlign: 'center',
|
||||
},
|
||||
emptyText: {
|
||||
marginTop: 10,
|
||||
color: '#999',
|
||||
fontSize: 14,
|
||||
},
|
||||
markdownScroll: {
|
||||
flex: 1,
|
||||
backgroundColor: '#fff',
|
||||
marginHorizontal: 12,
|
||||
marginBottom: 12,
|
||||
borderRadius: 12,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user