React Native: Info-Screen implementieren



Was bisher geschah?

In der zuvor hier zum Projekt hinzugefügten Datei src/screens/About.tsx wird die App-Informationsseite erstellt.

Infoseite implementieren

Die src/screens/About.tsx-Datei wie folgend modifizieren.

src/screens/About.tsx

import React from 'react';
import {
  Container, Content, Form, Text, View, Item, Thumbnail
} from 'native-base';
import { Col, Row, Grid } from 'react-native-easy-grid';
import { useTranslation } from 'react-i18next';
import { StyleSheet, Linking } from 'react-native';
import Header from '../components/Header';
import { DefaultScreenProps } from '../types/default';

/**
 * get app name and version from JSON
 */
const appinfo = require('../../app.json');
const appicon = require('../../android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png');

const About = (props: DefaultScreenProps): React.FunctionComponentElement<DefaultScreenProps> => {
  const { t, i18n } = useTranslation();

  return (
      <Container>
        <Header navigation={props.navigation} title={t('about.headerTitle')} />
        <View> 
        <Item fixedLabel>
          <Grid style={styles.grid}>
            <Row style={styles.gridRow}>
              <Col style={styles.gridColumnThumbnail}>
                <Thumbnail square large style={styles.thumbnail} source={appicon}></Thumbnail>
              </Col>
              <Col style={styles.gridColumnVersion}>
                <Text style={styles.appname}>{appinfo.displayName}</Text>
                <Text style={styles.appversion}>Version {appinfo.versionName}</Text>
                <Text style={styles.hyperlink} onPress={() => Linking.openURL('http://www.technik-tipps-und-tricks.de')}>Technik Tipps und Tricks</Text>
              </Col>
            </Row>
          </Grid>
        </Item>
      </View>
        <Content>
        <View style={styles.descriptionView}>
          <Text>
            <Text style={styles.descriptionAppName}>{appinfo.displayName}</Text>
            <Text style={styles.descriptionText}> {t('about.description')}</Text>
          </Text>
        </View>
        <View style={styles.hyperlinkView}>
          <Text>{t('about.website')}: <Text style={styles.hyperlink} onPress={() => Linking.openURL('http://www.technik-tipps-und-tricks.de/programmierung/javascript/react-native/')}>React Native Tutorial</Text></Text>
        </View>
        </Content>
      </Container>
  );
};

const styles = StyleSheet.create({
  appname: {
    fontSize: 20,
    fontWeight: "bold" 
  },
  appversion: {
    fontSize: 16
  },
  grid: {
    width: 'auto', 
    height: 80, 
    margin: 10
  },
  gridRow: {
    height: 80
  },
  gridColumnThumbnail: {
    backgroundColor: 'white', 
    height: 80, 
    width: 80
  },
  thumbnail: {
    width: 80, 
    height: 80
  },
  gridColumnVersion: {
    backgroundColor: 'white', 
    height: 80, 
    paddingLeft: 10
  },
  descriptionView: {
    flex: 1, 
    flexDirection: 'row', 
    flexWrap: 'wrap', 
    padding: 20,
  },
  descriptionAppName: {
    fontStyle: 'italic', 
    fontWeight: 'bold', 
    flex: 1, 
    flexDirection: 'row', 
    flexWrap: 'wrap'
  },
  descriptionText: {
    flex: 2, 
      flexDirection: 'row', 
      flexWrap: 'wrap'
    },
  hyperlinkView: {
    alignItems: 'flex-start', 
    padding: 20, 
    paddingVertical: 5
  },
  hyperlink: {
    color: 'blue',
    textDecorationLine: 'underline',
    fontWeight: "bold"
  },
});

export default About;

JSON-Übersetzungsdateien aktualisieren

In den Sprachdateien den Bereich “about” ergänzen.

src/translations/en.json

"about": {
    "headerTitle": "About",
    "description": "is a mobile React Native componentens demo app.",
    "website": "Website"

  }

src/translations/de.json

"about": {
    "headerTitle": "Info",
    "description": "ist eine mobile React Native Komponenten-Demo-App.",
    "website": "Webseite"
  }

Der fertige About-Screen

001-ReactNativeDemo-About-Page [Image]

Wie geht es weiter?


Anzeige

War diese Seite für dich informativ? Hat sie dir gefallen und geholfen?

Dann unterstütze die Weiterentwicklung mit einer kleinen Spende!

Die Spenden werden für die Lizenzen sowie neue Hard- und Software verwendet, die für weitere Projekte auf dieser Webseite eingesetzt werden.




Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert