Есть ли способ напечатать и показать объекты общей суммы, которые поступают из моего JSON в нижнем колонтитуле в нижней части экрана? - PullRequest
Новая
       24

Есть ли способ напечатать и показать объекты общей суммы, которые поступают из моего JSON в нижнем колонтитуле в нижней части экрана?

1 голос
/ 21 января 2020

В моем примере функция «getData» загружает мои данные, но после загрузки я пытаюсь распечатать и показать общую сумму объектов, полученных с JSON, в нижнем колонтитуле внизу экрана.
и я действительно не знаю, как это сделать. Я не понимаю, как решить эту проблему, потому что я пробовал много способов. Это мой пример: 


export default class MainScreen extends Component {
    constructor(props) {
        super(props);
        this.state = { data: [] };
    }
    getData = () => {
        this.setState({ isLoading: true })
        axios.get("https://rallycoding.herokuapp.com/api/music_albums")
            .then(res => {
                this.setState({
                    isLoading: false,
                    data: res.data
                });
                console.log(res.data);
            });
    }

    componentDidMount() {
        this.props.navigation.setParams({getData: this.getData}); //Here I set the function to parameter
        this.getData()
    }

    renderItem(item) {
        const { title, artist} = item.item;
        return (
            <TouchableOpacity
                onPress={() => this.props.navigation.navigate("Settings")}
            >
                <Card
                    containerStyle={{
                        borderColor: "black",
                        padding: 20,
                        height: 100,
                        backgroundColor: "#e6e6ff",
                        borderBottomEndRadius: 10,
                        borderTopRightRadius: 10,
                        borderBottomStartRadius: 10,
                    }}
                >
                    <View
                        style={{
                            paddingVertical: 15,
                            paddingHorizontal: 10,
                            flexDirection: "row",
                            justifyContent: "space-between",
                            alignItems: "center"
                        }}
                    >
                        <Icon name="chevron-right" size={30} color={"grey"} justifyContent={"space-between"} />
                        <Text style={styles.name}>
                            {title+ " " + artist}
                        </Text>
                        {/* <Text style={styles.vertical} numberOfLines={2}></Text> */}
                    </View>
                </Card>
            </TouchableOpacity>
        );
    }

    render() {
        if (this.state.isLoading) {
            return (
                <View style={{ flex: 1, paddingTop: 230 }}>
                    <Text
                        style={{ alignSelf: "center", fontWeight: "bold", fontSize: 20 }}
                    >
                        loading data...
          </Text>
                    <ActivityIndicator size={'large'} color={'#08cbfc'} />
                </View>
            );
        }

        return (
            <View style={styles.container}>
                <FlatList
                    data={this.state.data}
                    renderItem={this.renderItem.bind(this)}
                    keyExtractor={item => item.id}
                />
            </View>
        );
    }
}

/////////////////////////////////////////////////////////
MainScreen.navigationOptions = navData => {
    return {
        headerTitle: 'melon',
        headerRight: (
            <HeaderButtons HeaderButtonComponent={HeaderButton}>

                <Item
                    title=**"sync button"**
                    iconName={Platform.OS === "android" ? "md-sync" : "ios-sync"}
                    onPress={() => {
                        navData.navigation.navigate("getData");// here i trying to use the function
                        console.log("MT DATA====", navData.navigation.getParam(this.getData))//NO DATA
                    }}
                  />

            </HeaderButtons>
        )
    };
};

надеюсь, вы могли бы помочь в этой ситуации, потому что это действительно смутило меня этой ключевой опорой

Ответы [ 2 ]

0 голосов
/ 21 января 2020

Если вы уверены, что все элементы уникальны, вы можете просто использовать этот ключевой экстрактор в FlatList -

keyExtractor={(_, index) => String(index)}

, что обеспечит уникальность всех элементов вашего плоский список

0 голосов
/ 21 января 2020

Вероятно, вы должны установить параметр навигации как 

getData = () => {
        this.setState({ isLoading: true })
        axios.get("https://rallycoding.herokuapp.com/api/music_albums")
            .then(res => {
                this.setState({
                    isLoading: false,
                    data: res.data
                });
                this.props.navigation.setParams({data: res.data});
                console.log(res.data);
            });
    }

, а затем в 

headerRight: (
            <HeaderButtons HeaderButtonComponent={HeaderButton}>

                <Item
                    title=**"sync button"**
                    iconName={Platform.OS === "android" ? "md-sync" : "ios-sync"}
                    onPress={() => {
                        const data = navData.navigation.getParam("data");
                        console.log("MT DATA====", data);
                    }}
                  />

            </HeaderButtons>
        )
...