vendredi 10 novembre 2017

React Native/JavaScript gives me an error when I try to set a random number

Problem I am making in app in React Native, and want to pick a random variable every time the flatList runs. When I put the this.setState in the flatlist, I get an error. Can somebody please help me fix this so that a random number is picked every time the flatList runs.

I added a comment where I first define the variable, and where where the variable is trying to pick a random number.

The error just says, "Failed building JavaScript bundle".

Code

import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TextInput, ScrollView, TouchableHighlight, Button, FlatList } from 'react-native';
import { Font } from 'expo';
import * as firebase from 'firebase';


const firebaseConfig = {
  apiKey: "API-key",
  authDomain: "candidtwo.firebaseapp.com",
  databaseURL: "http://ift.tt/2h5E45n",
  storageBucket: "candidtwo.appspot.com",
};

const firebaseApp = firebase.initializeApp(firebaseConfig);

var fontLoaded = false;

var ref = firebase.database().ref('posts');

var colorPick = 1; /*Where I originally define the variable*/

var brightColor = ['#1daff1','#147c41','#9dcd46','#d3832e'];
var darkColor = ['#147aa8','#0f582d','#6c8f31','#935b1e'];

var newPostRef = ref.push();

var postWidth = 360;

export default class App extends React.Component {

  state = {
    fontLoaded: false,
  };



  componentDidMount() {
      Expo.Font.loadAsync({
        'JosefinSans-Regular.ttf': require('./JosefinSans-Regular.ttf'),
      });
 }
  constructor(props) {
    super(props);
    this.state = { postInput: ""}
 }

  componentWillMount(){
    this.getItems();
 }

  getItems(){
    var items = [];
    var query = ref.orderByKey();
    query.once ('value', (snap) => {
      snap.forEach ( (child) => {       
       items.push(
        child.val().content
        );     
      });
    items.reverse();
    }).then(() => {
        this.setState({firebaseItems: items});
    });
 }


 render() {
    return (
      <View style={styles.container}>
        <View style={styles.button}>
          <View style= />
          <Button
            onPress={() => this.setState({ fontLoaded: true })}
            title="Get started anonymously!"
            color="#fe8200"
            accessibilityLabel="Render the app"
          />
        </View>

        {this.state.fontLoaded ? (
          <View style={styles.container}>
            <Text style=>
                Whats on your mind? Create a post!
            </Text>  

            <TextInput
                 style=
                 onChangeText={(postInput)=>this.setState({postInput})}
                 value={this.state.postInput}    
             />


    <Button
      style=
      onPress={() => {
        newPostRef.set({ content:this.state.postInput });
        this.setState({ postInput: "Uploaded! Refresh app before posting again." })    
      }}               
      title="   +   "
      color="#fe8200"
    />

<View style=></View>
<View style=></View>


            <ScrollView style=>

     <View style= />
               <View style= >
         <Text style=>
                    Welcome to Phoenix Alpha 0.1
                </Text>
     <Text style=>
                    This app was made to let people be completely honest about what they are thinking! Please remember that this is the first version of the app, and is missing many features. More updates are coming soon!
                </Text>
            </View>


     <View style= />
               <View style= >
         <Text style=>
        Spam Policy
                </Text>
     <Text style=>
                    I will never silence any honest opinions that people might have on this app, but to keep the feed interesting for everybody I will remove spam posts (one or two word posts that do not serve any purpose)
                </Text>
            </View>


    <View style= />


     <FlatList
        data = {this.state.firebaseItems}
        renderItem={({ item, index }) =>
     <View>
    this.setState({ colorPick: Math.floor(Math.random() * 4) }) /*Where the random number fails to be called*/
                <View style=>
            <Text style=>
                        { item }
                    </Text>
                </View>
    <View style= />



                <View style= />
            </View>
  }
    />
        </ScrollView>
      </View>) : (null) }
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 8,
    backgroundColor: '#e8e8e8',
    alignItems: 'center'
  },
  button: {
    flex: 1,
    backgroundColor: '#e8e8e8',
    alignItems: 'center'
  },
});




Aucun commentaire:

Enregistrer un commentaire