Учебное пособие по React Native Шаг 19 — Редактирование Profile.js

Сегодня мы начнем работать над нашим файлом Profile.js. Там не о чем говорить, просто куча TODO.

TODO № 1: внесите изменения и дополнения в существующие и новые импорты.

import { Image, StyleSheet, TextInput } from 'react-native';
import { Container, Header, Body, Title, Content, Form, Item, Input, Icon, Button, Text, Label, View, H3, Picker, ListItem, Checkbox } from 'native-base';
import * as app from '../component/App'
import * as config from '../../../services/config'
import defaultImage from '../../../assets/profile120x120.png'
import styles from "../styles";

TODO № 2: измените React.Component на просто компонент.

class Profile extends Component

TODO #3: измените конструктор следующим образом:

constructor(props) {
  super(props);
  var user = props.user.user
  var user_goals = user.length != 0 ? user.goals.split(",") : []
  this.state = {
   isReady: false,
   gender: user.length != 0 ? user.gender : "",
        goals: user.length != 0 ? user.goals : "",
        social: user_goals.includes("social"),
        performance: user_goals.includes("performance"),
        competition: user_goals.includes("competition"),
        training: user_goals.includes("training/practice"),
        body_type: user.length != 0 ? user.body_type : "",
        ethnic: user.length != 0 ? user.ethnic : "",
        drinker: user.length != 0 ? user.drinker : "",
        smoker: user.length != 0 ? user.smoker : "",
        relationship_status: user.length != 0 ? user.relationship_status : "",
  }
 }

TODO #4: полностью УДАЛИТЬ функции componentDidMount и componentDidUpdate.

TODO #5: добавьте несколько onChangeFunctions на потом.

onGenderChange(value) {
     this.setState({ gender: value });
}
onBodyTypeChange(value) {
     this.setState({ body_type: value });
}
onEthnicChange(value) {
     this.setState({ ethnic: value });
}
onDrinkerChange(value) {
     this.setState({ drinker: value });
}
onSmokerChange(value) {
     this.setState({ smoker: value });
}
onRelationshipStatusChange(value) {
     this.setState({ relationship_status: value });
}

TODO #6: в вашей функции рендеринга измените условие document.location.hostname примерно так:

// Before
if(document.location.hostname.includes("staging.dancingnomads.com")) {
   cloudfront_url = cloudfront.cloudfront_staging
} else if (document.location.hostname.includes("dancingnomads.com")) {
   cloudfront_url = cloudfront.cloudfront_prod
} else {
   cloudfront_url = cloudfront.cloudfront_dev
}
if (user.user_photo != undefined && user.user_photo.length > 1) {
   var imageLink = cloudfront_url+user.user_photo.match(/profile\/(.*)/)[0]
   profilePicture = <div className="profileImage"><Image src={imageLink} width={280} height={280} /></div>
} else {
   profilePicture = <div className="profileImage"><Image src={defaultImage} width={280} height={280} /></div>
}
// After
if (config.environment.APP_ENV == "staging") {
   cloudfront_url = config.cloudfront_staging
} else if (config.environment.APP_ENV == "production") {
   cloudfront_url = config.cloudfront_prod
} else {
   cloudfront_url = config.cloudfront_dev
}
if (user.user_photo != undefined && user.user_photo.length > 1) {
   var imageLink = cloudfront_url+user.user_photo.match(/profile\/(.*)/)[0]
   profilePicture = <Image source={{uri: cloudfront_url+user.user_photo.match(/profile\/(.*)/)[0]}} style={{width: 120, height: 120, borderRadius: 80}}/>
} else {
   profilePicture = <Image source={defaultImage} style={{width: 120, height: 120, borderRadius: 80}}/>
}

TODO #7: Очистите функцию return() в render() и полностью ЗАМЕНИТЕ ее следующим образом:

return (
       <Container style={{ paddingTop: Constants.statusBarHeight }}>
         <Content padder>          
          <View style={{ flex: 1, alignItems: "center" }}>
           {profilePicture}
          </View>
<Form>
            <H3 style={styles.profileHeaderStyles}>Your Traits</H3>
             <Item picker>
                  <Picker
                    mode="dropdown"
                    iosIcon={<Icon name="arrow-down" />}
                    style={{ width: undefined }}
                    placeholder="Gender"
                    placeholderStyle={{ color: "#bfc6ea" }}
                    placeholderIconColor="#007aff"
                    selectedValue={this.state.body_type}
                    onValueChange={this.onGenderChange.bind(this)}
                  >
                    <Picker.Item label="Male" value="M" />
                    <Picker.Item label="Female" value="F" />
                  </Picker>
                </Item>
<Item picker>
                  <Picker
                    mode="dropdown"
                    iosIcon={<Icon name="arrow-down" />}
                    style={{ width: undefined }}
                    placeholder="Body Type"
                    placeholderStyle={{ color: "#bfc6ea" }}
                    placeholderIconColor="#007aff"
                    selectedValue={this.state.body_type}
                    onValueChange={this.onBodyTypeChange.bind(this)}
                  >
                    <Picker.Item label="Slim" value="slim" />
                    <Picker.Item label="Average" value="average" />
                    <Picker.Item label="Athletic" value="athletic" />
                    <Picker.Item label="Curvy" value="curvy" />
                    <Picker.Item label="Large" value="large" />
                  </Picker>
                </Item>
<Item picker>
                  <Picker
                    mode="dropdown"
                    iosIcon={<Icon name="arrow-down" />}
                    style={{ width: undefined }}
                    placeholder="Ethnicity"
                    placeholderStyle={{ color: "#bfc6ea" }}
                    placeholderIconColor="#007aff"
                    selectedValue={this.state.body_type}
                    onValueChange={this.onEthnicChange.bind(this)}
                  >
                    <Picker.Item label="Caucasian" value="caucasian" />
                    <Picker.Item label="Black" value="black" />
                    <Picker.Item label="Hispanic" value="hispanic" />
                    <Picker.Item label="Indian" value="indian" />
                    <Picker.Item label="Middle Eastern" value="middle eastern" />
                    <Picker.Item label="Native" value="native" />
                    <Picker.Item label="Asian" value="asian" />
                    <Picker.Item label="Mixed" value="mixed" />
                    <Picker.Item label="Other Ethnicity" value="other ethnicity" />
                  </Picker>
                </Item>
<Item picker>
                  <Picker
                    mode="dropdown"
                    iosIcon={<Icon name="arrow-down" />}
                    style={{ width: undefined }}
                    placeholder="Drinking"
                    placeholderStyle={{ color: "#bfc6ea" }}
                    placeholderIconColor="#007aff"
                    selectedValue={this.state.drinker}
                    onValueChange={this.onDrinkerChange.bind(this)}
                  >
                    <Picker.Item label="Non-Drinker" value="non-drinker" />
                    <Picker.Item label="Social Drinker" value="social drinker" />
                    <Picker.Item label="Regular Drinker" value="regular drinker" />
                  </Picker>
                </Item>
<Item picker>
                  <Picker
                    mode="dropdown"
                    iosIcon={<Icon name="arrow-down" />}
                    style={{ width: undefined }}
                    placeholder="Smoking"
                    placeholderStyle={{ color: "#bfc6ea" }}
                    placeholderIconColor="#007aff"
                    selectedValue={this.state.smoker}
                    onValueChange={this.onSmokerChange.bind(this)}
                  >
                    <Picker.Item label="Non-Smoker" value="non-smoker" />
                    <Picker.Item label="Occasional Smoker" value="occasional smoker" />
                    <Picker.Item label="Regular Smoker" value="regular smoker" />
                  </Picker>
                </Item>
<Item picker>
                  <Picker
                    mode="dropdown"
                    iosIcon={<Icon name="arrow-down" />}
                    style={{ width: undefined }}
                    placeholder="Relationship Status"
                    placeholderStyle={{ color: "#bfc6ea" }}
                    placeholderIconColor="#007aff"
                    selectedValue={this.state.relationship_status}
                    onValueChange={this.onRelationshipStatusChange.bind(this)}
                  >
                    <Picker.Item label="Single" value="single" />
                    <Picker.Item label="Separated" value="separated" />
                    <Picker.Item label="In a Relationship" value="in a relationship" />
                    <Picker.Item label="Married" value="married" />
                  </Picker>
                </Item>
<H3 style={styles.profileHeaderStyles}>Your Dance Goals</H3>
                <ListItem>
                 <CheckBox checked={this.state.social} />
                 <Body>
                    <Text>Social</Text>
                 </Body>
               </ListItem>
               <ListItem>
                 <CheckBox checked={this.state.performance} />
                 <Body>
                    <Text>Performance</Text>
                 </Body>
               </ListItem>
               <ListItem>
                 <CheckBox checked={this.state.competition} />
                 <Body>
                    <Text>Competition</Text>
                 </Body>
               </ListItem>
               <ListItem>
                 <CheckBox checked={this.state.training} />
                 <Body>
                    <Text>Training & Practice</Text>
                 </Body>
               </ListItem>
<Button block primary style={styles.loginMarginTop} onPress={(values) => this.submit(values)}>
             <Text>Save</Text>
            </Button>
            <Button transparent info style={{alignSelf: 'center'}}>
                <Text>Cancel</Text>
             </Button>
            </Form>           
       </Content>
        </Container>
)

TODO #8: измените нашу функцию экспортировать по умолчанию в конце файла.

// Before
export default Profile = connect(app.mapStateToProps, app.mapDispatchToProps)(Profile);
// After
Profile = connect(app.mapStateToProps, app.mapDispatchToProps)(Profile);
export default reduxForm({
 form: 'profile', // a unique name for this form
 enableReinitialize: true
})(Profile);

Вот и все. Сегодня не так много новых концепций, просто целая куча копий и вставок. Вам не нравятся такие уроки? *подмигнул*

Надеюсь, вы весело провели время и узнали что-то новое сегодня! Не забудьте похлопать этому посту! :)

Не любите читать? Попробуйте посмотреть видео

Справочные ссылки

Никто!

Свяжись со мной!

Linkedin: https://www.linkedin.com/in/donaldlee50
Instagram: https://www.instagram.com/donaldlee50/
Twitter: https://twitter. com/donaldlee50
Youtube: https://youtube.com/coursehack
Список рассылки: http://bit.ly/coursehack-mailing-list
Группа Coursehack в Facebook : bit.ly/join-coursehack-facebook-group

** Не забудьте поаплодировать и поделиться с другими разработчиками React Native & Expo!