从map-Javascript中的嵌套函数返回值（React-Native）

使用React Native，旨在渲染容器中不同位置的一系列视图

为此，我制作了一个名为

renderSatellites

的函数，它将映射给定的项目数组，返回一系列视图

为了计算位置，我正在创建一个名为

getFinalSatellitePosition

的函数。它将被输入地图索引，从而计算位置，返回

deltaX

和

deltaY

问题是，我不知道如何从

getFinalSatellitePosition

获取返回值，并将它们放置在视图样式中，该视图在

renderSatellites

的map函数中呈现。任何帮助都将不胜感激

相关代码如下：

//function for rendering satellites in their final position
renderSatellites(){
    let data = this.props.xxx
    const {navigation} = this.props;
    const {photo} = this.props;

    return(

        data.map((item, index) => {
            this.getFinalSatellitePosition(item, index)
            return (
                <View style={{ position: "absolute", zIndex: 2, width: 30, height: 30, left: deltaX, top: deltaY}}> //where I want the returned values to pass
                    <TouchableOpacity onPress={() => this.viewFeed()}>
                        {photo ? (
                          <ImageCustomised style={{height: 35, width: 35, borderRadius: 30, backgroundColor: '#1A85CA', justifyContent: 'center', alignItems: 'center', borderWidth: 1, borderColor: '#DADADA'}} uri={item.profilePhoto} />
                        ) : (
                          <View style={{height: 30, width: 30, borderRadius: 40, backgroundColor: '#1A85CA', justifyContent: 'center', alignItems: 'center', borderWidth: 3, borderColor: '#DADADA'}}>
                              <FeatherIcon
                                name="user"
                                size={14}
                                color="grey"
                              />
                          </View>
                      )}
                    </TouchableOpacity>
                </View>
            )
        })
    )
}

---

通过组合成单个函数解决了问题

//the purpose of this function is to render the items in orbit appropriate to the length of the data.
//map/while loop through data (defined below) whilst <= data.length. defining position as a result of above functions and defining content based on the data.
renderSatellites(){
    // let data = this.props.xxx
    const data = this.props.selectedLists
    const {navigation} = this.props;
    const {photo} = this.props;

    // const {deltaX} = this.state;
    // const {deltaY} = this.state;

    return data.map((item, index) => {
        // this.getFinalSatellitePosition(item, index);
        const satelliteCount = data.length
        const width = Dimensions.get('window').width;
        const height = Dimensions.get('window').width;
        const orbitRadius = (width * 0.6/2);
        const rotation = 0;
        const satelliteWidth = 30;
        const satelliteHeight = 30;

        const separationAngle = 360 / satelliteCount; //satcount is 2 meaning separating angle will be 180
        const fanAngle = (satelliteCount - 1) * separationAngle; //satcount is 2 so fan angle will be 180
        const baseAngle = (180 - fanAngle) / 2 + 90 + rotation; //fan angle is 180 so base angle will be 0

        let targetAngle = baseAngle + 45 + index * separationAngle; // for 0 will be 0 for 1 will be 180

        const deltaX = orbitRadius * Math.cos(this.toRadians(targetAngle)) + height / 2 - satelliteHeight/2;
        const deltaY = orbitRadius * Math.sin(this.toRadians(targetAngle)) + width / 2 - satelliteWidth/2;

        if (index < 13){
            return(
                <View style={{ position: "absolute", zIndex: 2, width: 30, height: 30, left: deltaX, top: deltaY}}>
                       <TouchableOpacity onPress={() => this.viewFeed()}>
                           {item.photo ? (
                             <ImageCustomised style={{height: 35, width: 35, borderRadius: 30, backgroundColor: '#DADADA', justifyContent: 'center', alignItems: 'center', borderWidth: 1, borderColor: '#DADADA'}} uri={item.photo} />
                           ) : (
                             <View style={{height: 30, width: 30, borderRadius: 40, backgroundColor: '#DADADA', justifyContent: 'center', alignItems: 'center', borderWidth: 3, borderColor: '#DADADA'}}>
                                 <FeatherIcon
                                   name="user"
                                   size={14}
                                   color="grey"
                                 />
                             </View>
                         )}
                         {/*<Text>{item.name}</Text>*/}
                       </TouchableOpacity>
                   </View>
               )}})
           }

//此函数的目的是根据数据的长度呈现轨道中的项目。
//映射/while循环通过数据（定义如下）同时{
//此.getFinalSatellitePosition（项目、索引）；
常数卫星计数=data.length
const width=Dimensions.get（'window'）.width；
常量高度=尺寸。获取（'窗口'）。宽度；
常数轨道半径=（宽度*0.6/2）；
常数旋转=0；
常数卫星宽度=30；
常数卫星高度=30；
const separationAngle=360/satelliteCount；//satcount为2表示分离角度为180
常数扇角=（卫星计数-1）*分离角；//卫星计数为2，因此扇角为180
const baseAngle=（180-扇形角）/2+90+旋转；//扇形角为180，因此基本角为0
设targetAngle=baseAngle+45+索引*separationAngle；//0为0，1为180
常数deltaX=轨道半径*数学cos（这个环面（目标角））+高度/2-卫星高度/2；
常数deltaY=轨道半径*数学sin（这是toRadians（targetAngle））+width/2-卫星宽度/2；
如果（指数<13）{
返回(
this.viewFeed（）}>
{item.photo(
) : (
)}
{/*{item.name}*/}
)}})
}

//the purpose of this function is to render the items in orbit appropriate to the length of the data.
//map/while loop through data (defined below) whilst <= data.length. defining position as a result of above functions and defining content based on the data.
renderSatellites(){
    // let data = this.props.xxx
    const data = this.props.selectedLists
    const {navigation} = this.props;
    const {photo} = this.props;

    // const {deltaX} = this.state;
    // const {deltaY} = this.state;

    return data.map((item, index) => {
        // this.getFinalSatellitePosition(item, index);
        const satelliteCount = data.length
        const width = Dimensions.get('window').width;
        const height = Dimensions.get('window').width;
        const orbitRadius = (width * 0.6/2);
        const rotation = 0;
        const satelliteWidth = 30;
        const satelliteHeight = 30;

        const separationAngle = 360 / satelliteCount; //satcount is 2 meaning separating angle will be 180
        const fanAngle = (satelliteCount - 1) * separationAngle; //satcount is 2 so fan angle will be 180
        const baseAngle = (180 - fanAngle) / 2 + 90 + rotation; //fan angle is 180 so base angle will be 0

        let targetAngle = baseAngle + 45 + index * separationAngle; // for 0 will be 0 for 1 will be 180

        const deltaX = orbitRadius * Math.cos(this.toRadians(targetAngle)) + height / 2 - satelliteHeight/2;
        const deltaY = orbitRadius * Math.sin(this.toRadians(targetAngle)) + width / 2 - satelliteWidth/2;

        if (index < 13){
            return(
                <View style={{ position: "absolute", zIndex: 2, width: 30, height: 30, left: deltaX, top: deltaY}}>
                       <TouchableOpacity onPress={() => this.viewFeed()}>
                           {item.photo ? (
                             <ImageCustomised style={{height: 35, width: 35, borderRadius: 30, backgroundColor: '#DADADA', justifyContent: 'center', alignItems: 'center', borderWidth: 1, borderColor: '#DADADA'}} uri={item.photo} />
                           ) : (
                             <View style={{height: 30, width: 30, borderRadius: 40, backgroundColor: '#DADADA', justifyContent: 'center', alignItems: 'center', borderWidth: 3, borderColor: '#DADADA'}}>
                                 <FeatherIcon
                                   name="user"
                                   size={14}
                                   color="grey"
                                 />
                             </View>
                         )}
                         {/*<Text>{item.name}</Text>*/}
                       </TouchableOpacity>
                   </View>
               )}})
           }