Skip to content

Commit 1f5b635

Browse files
huangwencunhuangwencun
authored
Merge pull request #12 from iChengbo/fix/rn-image
🐛 修复图片后缀问题
2 parents 3f1269e + 0ddf726 commit 1f5b635

File tree

2 files changed

+35
-86
lines changed

2 files changed

+35
-86
lines changed

‎picasso-package/packages/picasso-code-browser/src/reactnative/generateJSX.ts

+18-43
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
* @Author: iChengbo
33
* @Date: 2020-09-02 11:41:52
44
* @LastEditors: iChengbo
5-
* @LastEditTime: 2020-09-08 19:03:13
6-
* @FilePath: /picasso-core/packages/picasso-code/src/reactnative/generateJSX.ts
5+
* @LastEditTime: 2021-02-03 15:45:08
6+
* @FilePath: /Picasso/picasso-package/packages/picasso-code-browser/src/reactnative/generateJSX.ts
77
*/
88

99
const RN = {
@@ -24,7 +24,7 @@ function _generateRNJSX(data: any): any {
2424
for (let i = 0; i < data.length; i++) {
2525
let record = data[i]
2626
if (record.type == 'Image' && ((record.children && record.children.length == 0) || !record.children)) {
27-
const source = /^http/.test(record.value) ? `{uri: "${record.value}"}` : `require('./images/${record.value}')`;
27+
const source = formatImageSource(record.value);
2828

2929
html.push(
3030
`<Image style=${
@@ -39,7 +39,7 @@ function _generateRNJSX(data: any): any {
3939
// console.log("图片样式：", record.style)
4040
// 背景图片
4141
if (!!record.style.backgroundImage) {
42-
const bgSource = /^http/.test(record.style.backgroundImage) ? `{uri: "${record.style.backgroundImage}"}` : `require('./images/${record.style.backgroundImage}')`;
42+
const bgSource = formatImageSource(record.style.backgroundImage);
4343
html.push(`<${tag} style={${record.addClassName ?
4444
`StyleSheet.flatten([styles.${record.addClassName}, styles.${record.className}])`
4545
: `styles.${record.className}`}}
@@ -104,48 +104,23 @@ function _generateRNJSX(data: any): any {
104104
}
105105
return html.join('\n')
106106
}
107+
107108
export const generateRNJSX = (data: any) => {
108109
let JSXCode = _generateRNJSX(data)
109110
return JSXCode;
110111
// return beautifyHtml(JSXCode, { indent_size: 2 })
111112
}
112113

113-
// export const generateRNJSX = (data: any) => {
114-
// // let JSXCode = _generateRNJSX(data)
115-
// // return beautifyHtml(JSXCode, { indent_size: 2 })
116-
// let html = [];
117-
// for (let i = 0; i < data.length; i++) {
118-
// let record = data[i];
119-
// let tag = 'View';
120-
// if (record.type == 'Image') {
121-
122-
// } else if (record.type == 'Text') {
123-
124-
// } else {
125-
// html.push(`<${tag}>`)
126-
// }
127-
128-
// if (Array.isArray(record.children)) {
129-
// html.push(generateRNJSX(record.children));
130-
// }
131-
// if (['View', 'Text',].includes(record.type)) {
132-
// html.push(`</${tag}>`);
133-
// }
134-
// // switch (record.type) {
135-
// // case 'Image':
136-
137-
// // break;
138-
// // case 'Text':
139-
140-
// // break;
141-
// // default:
142-
// // const tag = 'View';
143-
// // html.push(`<${tag}> </${tag}>`);
144-
// // if (Array.isArray(record.children)) {
145-
// // html.push(generateRNJSX(record.children));
146-
// // }
147-
// // break;
148-
// // }
149-
// }
150-
// return html.join('\n');
151-
// }
114+
/**
115+
* 根据图片名称，格式化为 RN Image 标签 source 属性
116+
* @param imageName 图片名称
117+
*/
118+
function formatImageSource(imageName: string) {
119+
let imageSource = ''
120+
if (/^http/.test(imageName)) {
121+
imageSource = `{uri: "${imageName}"}`
122+
} else {
123+
imageSource = `require('./images/${imageName}')`.replace(/\@\d+x/, '')
124+
}
125+
return imageSource
126+
}

‎picasso-package/packages/picasso-code/src/reactnative/generateJSX.ts

+17-43
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
* @Author: iChengbo
33
* @Date: 2020-09-02 11:41:52
44
* @LastEditors: iChengbo
5-
* @LastEditTime: 2020-09-08 19:03:13
6-
* @FilePath: /picasso-core/packages/picasso-code/src/reactnative/generateJSX.ts
5+
* @LastEditTime: 2021-02-03 15:45:20
6+
* @FilePath: /Picasso/picasso-package/packages/picasso-code/src/reactnative/generateJSX.ts
77
*/
88

99
const RN = {
@@ -24,7 +24,7 @@ function _generateRNJSX(data: any): any {
2424
for (let i = 0; i < data.length; i++) {
2525
let record = data[i]
2626
if (record.type == 'Image' && ((record.children && record.children.length == 0) || !record.children)) {
27-
const source = /^http/.test(record.value) ? `{uri: "${record.value}"}` : `require('./images/${record.value}')`;
27+
const source = formatImageSource(record.value);
2828

2929
html.push(
3030
`<Image style=${
@@ -39,7 +39,7 @@ function _generateRNJSX(data: any): any {
3939
// console.log("图片样式：", record.style)
4040
// 背景图片
4141
if (!!record.style.backgroundImage) {
42-
const bgSource = /^http/.test(record.style.backgroundImage) ? `{uri: "${record.style.backgroundImage}"}` : `require('./images/${record.style.backgroundImage}')`;
42+
const bgSource = formatImageSource(record.style.backgroundImage);
4343
html.push(`<${tag} style={${record.addClassName ?
4444
`StyleSheet.flatten([styles.${record.addClassName}, styles.${record.className}])`
4545
: `styles.${record.className}`}}
@@ -110,42 +110,16 @@ export const generateRNJSX = (data: any) => {
110110
// return beautifyHtml(JSXCode, { indent_size: 2 })
111111
}
112112

113-
// export const generateRNJSX = (data: any) => {
114-
// // let JSXCode = _generateRNJSX(data)
115-
// // return beautifyHtml(JSXCode, { indent_size: 2 })
116-
// let html = [];
117-
// for (let i = 0; i < data.length; i++) {
118-
// let record = data[i];
119-
// let tag = 'View';
120-
// if (record.type == 'Image') {
121-
122-
// } else if (record.type == 'Text') {
123-
124-
// } else {
125-
// html.push(`<${tag}>`)
126-
// }
127-
128-
// if (Array.isArray(record.children)) {
129-
// html.push(generateRNJSX(record.children));
130-
// }
131-
// if (['View', 'Text',].includes(record.type)) {
132-
// html.push(`</${tag}>`);
133-
// }
134-
// // switch (record.type) {
135-
// // case 'Image':
136-
137-
// // break;
138-
// // case 'Text':
139-
140-
// // break;
141-
// // default:
142-
// // const tag = 'View';
143-
// // html.push(`<${tag}> </${tag}>`);
144-
// // if (Array.isArray(record.children)) {
145-
// // html.push(generateRNJSX(record.children));
146-
// // }
147-
// // break;
148-
// // }
149-
// }
150-
// return html.join('\n');
151-
// }
113+
/**
114+
* 根据图片名称，格式化为 RN Image 标签 source 属性
115+
* @param imageName 图片名称
116+
*/
117+
function formatImageSource(imageName: string) {
118+
let imageSource = ''
119+
if (/^http/.test(imageName)) {
120+
imageSource = `{uri: "${imageName}"}`
121+
} else {
122+
imageSource = `require('./images/${imageName}')`.replace(/\@\d+x/, '')
123+
}
124+
return imageSource
125+
}

0 commit comments

Comments
 (0)