MapboxMaps的PointAnnotation受ReactNative的视图扁平化的影响
介绍
最近在ReactNative中使用了@rnmapbox/maps来集成Mapbox地图。发现了一个问题。
版本信息
Dev OS：OSX 15.1.1Xcode:16.2Expo version：52.0.7ReactNative：0.76.3@rnmapbox/maps：10.1.33mapbox-gl：@rnmapbox/maps 10.1.33对应版本对应的版本^2.9.0
注意 目前（2025-1-13）最新的mapbox-gl版本为v3.9.2。
问题
当我使用@rnmapbox/maps准备渲染一条线时发了了报错Mapbox [error] PointAnnotation supports max 1 subview other than a callout。
报错的代码如下：
<PointAnnotation
key={`square-${i}`}
id={`square-${i}`}
coordinate={p.coordinate}
anchor={p.anchor}
>
<View style={styles.small} collapsable={false}>
<Text style={[styles.text, { color: 'white' }]}>
x={p.anchor.x.toPrecision(2)}, y={p.anchor.y.toPrecision(2)}
</Text>
</View>
</PointAnnotation>看提示这个应该是@rnmapbox/maps使用了Mapbox的PointAnnotation组件，Mapbox给出的错误，所以这是一个Mapbox的issue。
在@rnmapbox/maps项目的issue中搜索相关问题，搜索到一个相同的问题。[Bug]: PointAnnotation Throwing an Error with Nested Children on RN 0.76 with New Architecture #3682但是这里并没有找到解决方案。
提示 现在这个issue我添加了，一个临时解决方案，屏蔽React Native的视图扁平化。
最后通过查询得知在ReactNative 0.76中有一个视图扁平化的特性，这个特性会尝试将视图树中的所有视图合并为一个视图，以减少渲染次数和提高性能。但是PointAnnotation组件不支持多个子视图，所以扁平化之后会报错。
知道问题之后，就要想办法解决。首先三方库的问题我们还不行去处理，目前想的就是找个临时方案，使我们的应用可以正常运行。一般我们添加一个新功能的时候，是需要考虑兼容性问题的，所以我觉得既然新增了视图扁平化的能力，而且是默认打开的，那么应该就会有关闭的方案。于是我查找了一下，果然可以通过参数关闭组件的扁平化。
查询得到给某个组件添加collapsable={false}属性就可以关闭视图扁平化，所以解决方案如下：
<PointAnnotation
key={`square-${i}`}
id={`square-${i}`}
coordinate={p.coordinate}
anchor={p.anchor}
>
{/* collapsable={false} off view flattening */}
<View style={styles.small} collapsable={false}>
<Text style={[styles.text, { color: 'white' }]}>
x={p.anchor.x.toPrecision(2)}, y={p.anchor.y.toPrecision(2)}
</Text>
</View>
</PointAnnotation>在给PointAnnotation子组件，添加了collapsable={false}属性之后，就正常了。这个方案也同步分享到了@rnmapbox/maps的issue中，PointAnnotation Throwing an Error with Nested Children on RN 0.76 with New Architecture #3682。
我是使用高德地图坐标（gcj02）通过社区方案转换为世界坐标（wgs84）来测试转换效果，使用坐标点列表划线。
完整代码如下：
/*
* @Author: matiastang
* @Date: 2024-12-12 15:30:15
* @LastEditors: matiastang
* @LastEditTime: 2024-12-13 16:32:39
* @FilePath: /ReactNativeMapbox/src/index.tsx
* @Description: React Native Mapbox
*/
import React, { useState, useEffect, useMemo } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import Mapbox, { MapView, Camera, PointAnnotation, ShapeSource, LineLayer } from '@rnmapbox/maps';
import { gcj02towgs84 } from './utils/convert';
Mapbox.setAccessToken('Mapbox Access Token');
const ANNOTATION_SIZE = 50;
const styles = StyleSheet.create({
page: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
container: {
height: '100%',
width: '100%',
backgroundColor: 'tomato',
},
map: {
flex: 1,
},
small: {
backgroundColor: 'blue',
height: ANNOTATION_SIZE,
justifyContent: 'center',
width: ANNOTATION_SIZE,
flex: 1,
},
text: {
position: 'absolute',
fontSize: 10,
},
lineLayerStyle1: {
lineWidth: 5,
lineColor: '#007bff',
} as any,
lineLayerStyle2: {
lineWidth: 5,
lineColor: '#007bff',
lineOpacity: 0.8,
} as any,
lineLayerStyle3: {
lineColor: 'red',
lineCap: 'round',
lineJoin: 'round',
lineWidth: 4,
lineGradient: [
'interpolate',
['linear'],
['line-progress'],
0,
'blue',
0.1,
'royalblue',
0.3,
'cyan',
0.5,
'lime',
0.7,
'yellow',
1,
'red',
],
} as any,
});
const corners = [
{
coordinate: [104.04236230382546, 30.560321528425327],
anchor: { x: 0, y: 1 },
},
{
coordinate: [104.10764037603202, 30.47969254686276],
anchor: { x: 0, y: 0 },
},
];
export default function App(): React.JSX.Element {
const [centerPoint, setCenterPoint] = useState<GeoJSON.Position>(gcj02towgs84(104.044816, 30.557822) as GeoJSON.Position);
const [coordinates, setCoordinates] = useState<GeoJSON.Position[][]>([]);
const lineString = useMemo(() => {
return {
type: 'FeatureCollection',
features: coordinates.map((item) => {
return {
type: 'Feature',
id: 'a-feature',
geometry: {
type: 'LineString',
// 至少3个点
coordinates: item,
},
properties: {
name: 'Sample Line',
},
};
}),
} as GeoJSON.FeatureCollection<GeoJSON.LineString>;
}, [coordinates]);
const lineString1 = useMemo(() => {
return {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
id: 'a-feature',
geometry: {
type: 'LineString',
// 至少3个点
coordinates: coordinates[0],
},
properties: {
name: 'One Line',
},
},
],
} as GeoJSON.FeatureCollection<GeoJSON.LineString>;
}, [coordinates]);
const lineString2 = useMemo(() => {
return {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
id: 'a-feature',
geometry: {
type: 'LineString',
// 至少3个点
coordinates: coordinates[1],
},
properties: {
name: 'Two Line',
},
},
],
} as GeoJSON.FeatureCollection<GeoJSON.LineString>;
}, [coordinates]);
const lineString3 = useMemo(() => {
return {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
id: 'a-feature',
geometry: {
type: 'LineString',
// 至少3个点
coordinates: coordinates[2],
},
properties: {
name: 'Three Line',
},
},
],
} as GeoJSON.FeatureCollection<GeoJSON.LineString>;
}, [coordinates]);
useEffect(() => {
Mapbox.setTelemetryEnabled(true);
const gcj02Points = [
'104.044815,30.557961;104.043971,30.557961;104.043971,30.557961;104.043971,30.557613;104.043965,30.557446;104.043965,30.557307;104.043971,30.557135;104.043976,30.556749;104.043976,30.556465;104.043976,30.556288;104.043987,30.555746;104.043987,30.555746;104.043134,30.555741;104.042013,30.555735;104.041315,30.555725;104.040999,30.555719;104.040999,30.555719;104.041026,30.556025;104.04109,30.556722;104.041176,30.557725;104.041197,30.557983;104.041224,30.558316;104.041348,30.559437;104.041439,30.560113;104.041578,30.561223;104.041578,30.561223;104.043252,30.560848;104.044073,30.560654;104.045339,30.560359;104.045746,30.560273;104.046079,30.560225;104.046444,30.560322;104.046438,30.560853;104.046374,30.563406;104.046379,30.563857;104.046379,30.564152;104.046369,30.564951;104.046336,30.565568;104.046304,30.56574;104.046245,30.565997;104.046138,30.5664;104.046036,30.566705;104.046015,30.566765;104.045966,30.566958;104.045923,30.567086;104.045768,30.56744;104.045768,30.56744;104.045639,30.56773;104.04558,30.567939;104.045548,30.568106;104.045548,30.568106;104.045768,30.568283;104.045827,30.56832;104.045891,30.568347;104.045972,30.568358;104.046047,30.568358;104.046224,30.56832;104.046374,30.568283;104.046825,30.568159;104.046948,30.568143;104.047163,30.568132;104.047307,30.568138;104.047452,30.568165;104.04757,30.568197;104.047672,30.568229;104.048058,30.568379;104.048144,30.568411;104.048321,30.56846;104.048514,30.568486;104.048841,30.568486;104.049807,30.568218;104.049979,30.568191;104.050091,30.568181;104.050204,30.568181;104.050295,30.568197;104.051234,30.567934;104.054506,30.567022;104.056684,30.566405;104.057865,30.56611;104.058562,30.565965;104.059404,30.56582;104.060863,30.565633;104.062167,30.565541;104.0625,30.565531;104.063341,30.565509;104.064168,30.565515;104.065665,30.565547;104.069929,30.565659;104.070943,30.565686;104.071356,30.56567;104.071769,30.565659;104.073529,30.565761;104.074746,30.565826;104.07583,30.565895;104.076871,30.565976;104.077654,30.566056;104.077938,30.566088;104.079043,30.566217;104.080293,30.566394;104.081506,30.566593;104.081886,30.566652;104.082691,30.566786;104.083383,30.566909;104.084472,30.567092;104.085035,30.567188;104.090732,30.568138;104.091548,30.568266;104.092776,30.568422;104.093871,30.568535;104.095083,30.568631;104.09688,30.568717;104.097363,30.568723;104.098779,30.568723;104.100335,30.56868;104.101413,30.568621;104.102684,30.568524;104.103752,30.568438;104.104819,30.568352;104.104819,30.568352;104.104889,30.568299;104.104975,30.568272;104.106445,30.568116;104.106455,30.568116;104.106455,30.568116;104.106702,30.56802;104.107459,30.567778;104.107716,30.567666;104.108086,30.567462;104.108371,30.567274;104.108687,30.567;104.108687,30.567;104.108805,30.566915;104.109336,30.566389;104.10969,30.565745;104.109851,30.56523;104.109905,30.564898;104.109931,30.564227;104.10991,30.563964;104.109905,30.563905;104.109814,30.563401;104.109277,30.561148;104.109266,30.561008;104.109293,30.560826;104.109191,30.56044;104.108993,30.559716;104.108901,30.559372;104.108821,30.559061;104.108682,30.558546;104.108387,30.557382;104.108231,30.556647;104.108113,30.555805;104.108006,30.554753;104.107979,30.553986;104.107974,30.55301;104.107974,30.552978;104.107995,30.549351;104.108,30.548601;104.108016,30.546525;104.10806,30.545661;104.108113,30.545146;104.108199,30.544545;104.108322,30.543896;104.108462,30.543333;104.108617,30.542807;104.108896,30.541991;104.108966,30.541788;104.109165,30.541262;104.10946,30.540527;104.110693,30.537131;104.110919,30.536375;104.111047,30.535908;104.111225,30.535093;104.111353,30.53431;104.111412,30.533816;104.111471,30.533017;104.111498,30.532287;104.111525,30.531005;104.111686,30.522047;104.111702,30.520808;104.111713,30.520019;104.111718,30.519686;104.111916,30.509033;104.111954,30.50708;104.112002,30.506232;104.112067,30.50546;104.11212,30.50494;104.112276,30.503813;104.112576,30.502225;104.113016,30.500546;104.113268,30.499725;104.113633,30.498642;104.113837,30.498046;104.114035,30.497515;104.114309,30.496759;104.114588,30.495933;104.114722,30.495482;104.114872,30.494967;104.115033,30.49427;104.115173,30.493663;104.115333,30.492757;104.115457,30.491808;104.115527,30.490778;104.115613,30.48706;104.115629,30.486325;104.115629,30.486046;104.115629,30.485756;104.115629,30.485467;104.115629,30.485467;104.115548,30.485322;104.115527,30.485225;104.1155,30.483664;104.115505,30.482994;104.115511,30.482747;104.115532,30.481604;104.115527,30.481202;104.115505,30.480741;104.115495,30.480263;104.115495,30.480263;104.115511,30.480075;104.115543,30.47963;104.115548,30.479437;104.115559,30.479121;104.115553,30.478863;104.115553,30.478863;104.115167,30.478954;104.113413,30.479383;104.112448,30.479609;104.111316,30.479872;104.111144,30.479915;104.109701,30.480253;104.109631,30.480269;104.108875,30.480435;104.108821,30.480274;104.109835,30.480049;104.11049,30.479898;104.111278,30.479711;104.111616,30.47963;104.111815,30.479582;104.112464,30.479416;104.112464,30.479416;104.11255,30.47881;104.112694,30.477828;104.112694,30.477828;104.111482,30.478107;104.110425,30.478337;104.110425,30.478337;104.110361,30.478214;104.11028,30.477962;104.110296,30.477903;104.110371,30.477871;104.110613,30.477822;104.110672,30.477796;104.110693,30.477753;104.110608,30.477265;104.110584,30.477159',
'104.044815,30.557961;104.045408,30.557961;104.0461,30.557956;104.0461,30.557956;104.046079,30.557436;104.046079,30.557066;104.04609,30.556567;104.04609,30.556261;104.04609,30.556057;104.046084,30.555757;104.046079,30.555655;104.046079,30.555403;104.046079,30.555403;104.046235,30.555016;104.04624,30.552978;104.04624,30.552307;104.046245,30.551846;104.046245,30.551846;104.046256,30.550183;104.046261,30.549502;104.046261,30.548885;104.046267,30.548563;104.046272,30.547061;104.046277,30.546803;104.046277,30.54616;104.046299,30.545301;104.04631,30.543901;104.04631,30.543;104.046315,30.542265;104.046315,30.54211;104.046315,30.541991;104.04632,30.5413;104.04632,30.54079;104.046347,30.535581;104.046374,30.533205;104.046379,30.532953;104.046385,30.532733;104.046369,30.532116;104.046342,30.531863;104.046283,30.531542;104.046208,30.531273;104.046116,30.531005;104.045805,30.530115;104.045381,30.528924;104.045247,30.528484;104.044287,30.525711;104.043697,30.524144;104.043118,30.522626;104.043048,30.522444;104.04301,30.522342;104.042731,30.521601;104.042378,30.520668;104.042131,30.520019;104.042131,30.520014;104.041508,30.518383;104.04123,30.517503;104.041144,30.51723;104.04079,30.516103;104.040527,30.515288;104.040441,30.515025;104.039604,30.51231;104.039245,30.511286;104.038343,30.509033;104.037646,30.5073;104.037603,30.507187;104.037544,30.507042;104.037496,30.506919;104.036734,30.505047;104.036498,30.504489;104.036364,30.504146;104.036364,30.504146;104.036289,30.503641;104.036251,30.503384;104.036246,30.503153;104.036348,30.501099;104.036332,30.499892;104.036305,30.499114;104.036283,30.498867;104.036278,30.49877;104.036219,30.498459;104.036085,30.4981;104.036053,30.498046;104.035951,30.497875;104.035591,30.497408;104.035227,30.49693;104.034722,30.49604;104.034245,30.49515;104.034234,30.495096;104.034181,30.494795;104.0341,30.494377;104.033558,30.491276;104.03351,30.491003;104.033456,30.490713;104.033413,30.490493;104.033397,30.490396;104.033145,30.488964;104.032882,30.487489;104.032796,30.48706;104.032646,30.486277;104.032545,30.485944;104.032325,30.485182;104.032233,30.484882;104.032115,30.484469;104.032115,30.484469;104.03204,30.484383;104.03197,30.484335;104.031745,30.484286;104.031622,30.484297;104.031531,30.484346;104.031445,30.484415;104.031354,30.484512;104.030983,30.484925;104.030908,30.485038;104.030887,30.485096;104.030881,30.485161;104.030887,30.485236;104.030914,30.485284;104.03101,30.485391;104.031214,30.48551;104.031396,30.485504;104.031541,30.485504;104.031724,30.485499;104.033301,30.485467;104.03387,30.485461;104.034738,30.485445;104.034958,30.48544;104.038145,30.485365;104.038258,30.485365;104.038606,30.485354;104.040527,30.485316;104.041836,30.485306;104.042463,30.48529;104.045907,30.485241;104.046535,30.485231;104.046819,30.485225;104.050934,30.485161;104.051491,30.48515;104.051669,30.48515;104.052371,30.485129;104.055628,30.485086;104.056395,30.485102;104.05772,30.485231;104.058465,30.485333;104.058851,30.485402;104.05934,30.485488;104.060021,30.485649;104.060777,30.48581;104.061786,30.486019;104.0625,30.486164;104.062816,30.486228;104.063481,30.486363;104.063937,30.486454;104.066088,30.486894;104.066206,30.486915;104.066957,30.48706;104.067424,30.487151;104.068497,30.487355;104.068851,30.487393;104.068851,30.487393;104.069983,30.487484;104.070176,30.487478;104.070369,30.487478;104.0706,30.487484;104.071045,30.487484;104.071646,30.487462;104.071775,30.487446;104.071775,30.487446;104.073046,30.48735;104.074645,30.48714;104.075213,30.48706;104.075293,30.487049;104.075884,30.486963;104.077901,30.486685;104.078496,30.486609;104.078727,30.486577;104.079955,30.486405;104.080138,30.486373;104.081355,30.486207;104.082412,30.486057;104.082841,30.485992;104.083689,30.485864;104.084021,30.485815;104.084472,30.48574;104.08517,30.485633;104.085421,30.485595;104.090861,30.484743;104.091784,30.484581;104.092073,30.484517;104.092508,30.484383;104.092985,30.484286;104.094831,30.483831;104.094965,30.483798;104.097454,30.483176;104.098017,30.483037;104.098119,30.483005;104.098452,30.482929;104.100029,30.482532;104.100243,30.482479;104.10247,30.481921;104.102856,30.48183;104.103231,30.481733;104.103634,30.481631;104.103956,30.481551;104.104422,30.481427;104.106445,30.480864;104.107019,30.480708;104.107748,30.480521;104.10785,30.480505;104.108226,30.480413;104.108821,30.480274;104.109835,30.480049;104.11049,30.479898;104.111278,30.479711;104.111616,30.47963;104.111815,30.479582;104.112464,30.479416;104.112464,30.479416;104.11255,30.47881;104.112694,30.477828;104.112694,30.477828;104.111482,30.478107;104.110425,30.478337;104.110425,30.478337;104.110361,30.478214;104.11028,30.477962;104.110296,30.477903;104.110371,30.477871;104.110613,30.477822;104.110672,30.477796;104.110693,30.477753;104.110608,30.477265;104.110584,30.477159',
'104.044815,30.557961;104.045408,30.557961;104.0461,30.557956;104.0461,30.557956;104.046079,30.557436;104.046079,30.557066;104.04609,30.556567;104.04609,30.556261;104.04609,30.556057;104.046084,30.555757;104.046079,30.555655;104.046079,30.555403;104.046079,30.555403;104.046235,30.555016;104.04624,30.552978;104.04624,30.552307;104.046245,30.551846;104.046245,30.551846;104.046256,30.550183;104.046261,30.549502;104.046261,30.548885;104.046267,30.548563;104.046272,30.547061;104.046277,30.546803;104.046277,30.54616;104.046299,30.545301;104.04631,30.543901;104.04631,30.543;104.046315,30.542265;104.046315,30.54211;104.046315,30.541991;104.04632,30.5413;104.04632,30.54079;104.046347,30.535581;104.046374,30.533205;104.046379,30.532953;104.046385,30.532733;104.046369,30.532116;104.046342,30.531863;104.046283,30.531542;104.046208,30.531273;104.046116,30.531005;104.045805,30.530115;104.045381,30.528924;104.045247,30.528484;104.044287,30.525711;104.043697,30.524144;104.043118,30.522626;104.043048,30.522444;104.04301,30.522342;104.042731,30.521601;104.042731,30.521601;104.042474,30.521387;104.042345,30.52107;104.04227,30.520888;104.042136,30.520518;104.041948,30.520019;104.041841,30.51974;104.041374,30.518474;104.041342,30.518377;104.040999,30.517353;104.040725,30.516462;104.040575,30.51598;104.040527,30.515824;104.040183,30.51473;104.040049,30.514231;104.039652,30.512922;104.039497,30.512412;104.039459,30.512256;104.039422,30.512063;104.039352,30.511843;104.039593,30.511693;104.040081,30.511586;104.040527,30.51149;104.040553,30.511484;104.041251,30.511334;104.041551,30.511296;104.041551,30.511296;104.041632,30.510454;104.04168,30.510025;104.041685,30.509837;104.041766,30.509033;104.041771,30.508979;104.041782,30.508866;104.041895,30.507868;104.041943,30.507182;104.04197,30.506774;104.042007,30.506565;104.042088,30.506324;104.042286,30.50598;104.042393,30.505766;104.042533,30.505513;104.042753,30.50509;104.042806,30.504993;104.042925,30.504752;104.043225,30.504076;104.043703,30.503008;104.04389,30.502601;104.044271,30.501737;104.044791,30.500557;104.04499,30.500063;104.045183,30.499505;104.045323,30.499398;104.047361,30.499656;104.049968,30.499978;104.050531,30.500047;104.052403,30.500289;104.052543,30.50031;104.053316,30.500498;104.057055,30.501463;104.057055,30.501463;104.057199,30.501104;104.057291,30.500766;104.057366,30.500439;104.057393,30.500208;104.057382,30.500058;104.057344,30.499886;104.057312,30.499811;104.057049,30.499243;104.056926,30.499017;104.056861,30.498846;104.056781,30.498652;104.056733,30.498465;104.056722,30.498341;104.056754,30.498046;104.05676,30.49796;104.056786,30.497842;104.056888,30.497435;104.057038,30.496888;104.057108,30.496614;104.057189,30.496389;104.057376,30.496024;104.0575,30.495841;104.057773,30.495514;104.058181,30.495031;104.058433,30.494769;104.058632,30.494597;104.058809,30.494474;104.06074,30.493154;104.061518,30.492634;104.062446,30.492027;104.0625,30.491995;104.063427,30.491426;104.064157,30.490976;104.0656,30.490085;104.065943,30.489871;104.06612,30.489758;104.066566,30.489479;104.066871,30.489222;104.067054,30.488991;104.067445,30.488428;104.067461,30.487752;104.067478,30.487387;104.067478,30.487387;104.066276,30.487242;104.066373,30.486851;104.066705,30.48692;104.067435,30.48706;104.067547,30.487081;104.068282,30.487275;104.068497,30.487355;104.068851,30.487393;104.068851,30.487393;104.069983,30.487484;104.070176,30.487478;104.070369,30.487478;104.0706,30.487484;104.071045,30.487484;104.071646,30.487462;104.071775,30.487446;104.071775,30.487446;104.073046,30.48735;104.074645,30.48714;104.075213,30.48706;104.075293,30.487049;104.075884,30.486963;104.077901,30.486685;104.078496,30.486609;104.078727,30.486577;104.079955,30.486405;104.080138,30.486373;104.081355,30.486207;104.082412,30.486057;104.082841,30.485992;104.083689,30.485864;104.084021,30.485815;104.084472,30.48574;104.08517,30.485633;104.085421,30.485595;104.090861,30.484743;104.091784,30.484581;104.092073,30.484517;104.092508,30.484383;104.092985,30.484286;104.094831,30.483831;104.094965,30.483798;104.097454,30.483176;104.098017,30.483037;104.098119,30.483005;104.098452,30.482929;104.100029,30.482532;104.100243,30.482479;104.10247,30.481921;104.102856,30.48183;104.103231,30.481733;104.103634,30.481631;104.103956,30.481551;104.104422,30.481427;104.106445,30.480864;104.107019,30.480708;104.107748,30.480521;104.10785,30.480505;104.108226,30.480413;104.108821,30.480274;104.109835,30.480049;104.11049,30.479898;104.111278,30.479711;104.111616,30.47963;104.111815,30.479582;104.112464,30.479416;104.112464,30.479416;104.11255,30.47881;104.112694,30.477828;104.112694,30.477828;104.111482,30.478107;104.110425,30.478337;104.110425,30.478337;104.110361,30.478214;104.11028,30.477962;104.110296,30.477903;104.110371,30.477871;104.110613,30.477822;104.110672,30.477796;104.110693,30.477753;104.110608,30.477265;104.110584,30.477159',
];
const wgs84Points = gcj02Points.map((path) => {
return transformPolyline(path);
});
setCoordinates(wgs84Points);
}, []);
const transformPolyline = (paths: string) => {
const pathArray = paths.split(';');
return pathArray.map((path: string) => {
const location = path.split(',');
return gcj02towgs84(parseFloat(location[0]), parseFloat(location[1]));
});
};
return (
<View style={styles.page}>
<View style={styles.container}>
<MapView style={styles.map}>
{corners.map((p, i) => (
<PointAnnotation
key={`square-${i}`}
id={`square-${i}`}
coordinate={p.coordinate}
anchor={p.anchor}
>
{/* collapsable={false} off view flattening */}
<View style={styles.small} collapsable={false}>
<Text style={[styles.text, { color: 'white' }]}>
x={p.anchor.x.toPrecision(2)}, y={p.anchor.y.toPrecision(2)}
</Text>
</View>
</PointAnnotation>
))}
<ShapeSource id="line-source-1" lineMetrics={1 as any} shape={lineString1}>
<LineLayer id="line-layer-1" style={styles.lineLayerStyle1} />
</ShapeSource>
<ShapeSource id="line-source-2" lineMetrics={1 as any} shape={lineString2}>
<LineLayer id="line-layer-2" style={styles.lineLayerStyle2} />
</ShapeSource>
{/* lineMetrics只能是数字或nil不能为bool */}
<ShapeSource id="line-source-3" lineMetrics={1 as any} shape={lineString3}>
<LineLayer id="line-layer-3" style={styles.lineLayerStyle3} />
</ShapeSource>
<Camera
defaultSettings={{
zoomLevel: 11,
centerCoordinate: centerPoint,
}}
/>
</MapView>
</View>
</View>
);
}注意 这里是画线段，需要只是三个点才行！
总结
React Native引入的视图扁平化特性，感觉确实挺好的，也是有必要的。对应Mapbox的PointAnnotation为什么要限制子组件只能为一个，不太清楚原因，可以等后面看看是否配置React Native的新特性。
参考
[Bug]: PointAnnotation Throwing an Error with Nested Children on RN 0.76 with New Architecture #3682