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

Question

Working with React Native, aiming to render a series of views at different positions within a container.

To do this I am making a function called renderSatellites which will map through a given array of items, returning a series of views.

To calculate the position I am making a function called getFinalSatellitePosition . It will be fed the index of the map and consequently calculate the position, returning deltaX and deltaY .

The issue is that I don't know how to take the returned values from getFinalSatellitePosition and place them within the styling of the view that is rendered within the map function of renderSatellites . Any help would be appreciated.

Relevant Code Below:

//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>
            )
        })
    )
}

//function for locating satellite final position around the orbit
getFinalSatellitePosition(data, index){
    const satelliteCount = data.length
    const width = Dimensions.get('window').width;
    const height = Dimensions.get('window').width;
    const orbitRadius = (width * 0.6);
    const rotation = 0;

    const separationAngle = 360 / satelliteCount;
    const fanAngle = (satelliteCount - 1) * separationAngle;
    const baseAngle = (180 - fanAngle) / 2 + 90 + rotation;

    let targetAngle = baseAngle + index * separationAngle;

    return {
      deltaX: orbitRadius * Math.cos(this.toRadians(targetAngle)) - height / 2, //returned position that I want to pass to mapped component
      deltaY: orbitRadius * Math.sin(this.toRadians(targetAngle)) + width / 2, //returned position that I want to pass to mapped component
      angle: targetAngle,
    };
}

Answer 1

Resolved problem by combining into a single function.

//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>
               )}})
           }