如何使用React Native Part＃14构建WordPress客户端应用程序：实施设置屏幕

最新推荐文章于 2020-05-06 14:18:29 发布

dfsgwe1231

最新推荐文章于 2020-05-06 14:18:29 发布

阅读量171

点赞数

文章标签： php javascript 数据库 ViewUI

现在，我们需要转到Setting.js文件并实现“联系人”菜单选项UI，以便导航到“联系人”屏幕。为此，我们需要使用Setting.js文件中以下代码片段中的代码：

import React, {Component} from 'react' ;
import {View, TouchableOpacity} from 'react-native' ;
import {List, Icon} from 'react-native-paper' ;
class Setting extends Component  {
  constructor (props) {
    super (props);
    this .state = {};
  }

  render() {
    return (
      < View >
         <TouchableOpacity
          onPress={() => this.props.navigation.navigate('Contact')}>
          <List.Item
            title="Contact Us"
            left={() => <List.Icon icon="chevron-right" />}
          />
        </TouchableOpacity>
      </View>
    );
  }
}

export default Setting;

在这里，我们已经导入了所有必需的程序包和组件，以实现“设置”屏幕UI。然后，我们使用TouchableOpacity组件包装了List组件，以便在“设置”屏幕中显示“联系人”选项。然后，我们在TouchableOpacity组件中设置了导航配置。

因此，我们将在仿真器屏幕中获得以下结果：

如我们所见，“设置”屏幕中有“联系方式”选项。

实施联系屏幕

在这里，我们需要创建一个称为“联系人”屏幕的新屏幕。为此，我们需要在'./screens/'文件夹中创建一个名为Contact.js的新文件。然后，我们需要将Contact.js文件导入App.js文件，然后将其添加到堆栈导航器中，如下面的代码片段所示：

const StackNavigator = createStackNavigator({
  DashboardTabNavigator : DashboardTabNavigator,
  SinglePost : SinglePost,
  CategorieList : CategorieList,
  Contact :Contact
});

现在，我们需要返回到Contact.js文件并导入所需的包。在这里，我们将使用react-native- firebase和tcomb-form-native软件包，如下面的代码片段所示：

import {
  View,
  StyleSheet,
  TouchableHighlight,
  Text,
  Alert,
  ActivityIndicator,
  Image,
} from 'react-native' ;
import firebase from 'react-native-firebase'
import t from 'tcomb-form-native' ; // 0.6.9

export default class Contact extends Component  {
  constructor (props) {
    super (props);
    this .state = {
      submit : false
    };
  }
}

在这里，我们定义了一个名为Submit的状态，该状态将处理表单向Firebase的提交。

现在，我们将使用tcomb-form-native包初始化表单实例并定义表单的结构。然后，我们将在render（）函数中使用它，如下面的代码片段所示：

render() {
    const Form = t.form.Form;
    const ContactForm = t.struct({
      email : t.String,
      name : t.String,
      message : t.String,
    });
    return (
      < View style = {styles.container} >
         <Form type={ContactForm}  />
      </View> 
    );


const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    marginTop: 50,
    padding: 20,
    backgroundColor: '#ffffff',
  },
  buttonText: {
    fontSize: 18,
    color: 'white',
    alignSelf: 'center',
  },
  button: {
    height: 36,
    backgroundColor: '#48BBEC',
    borderColor: '#48BBEC',
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 10,
    alignSelf: 'stretch',
    justifyContent: 'center',
  },
});

因此，我们将在仿真器屏幕中获得以下结果：

尽我们所能，我们已经在“联系人”屏幕中获得了表单界面。

现在，我们将在其中实现文本区域，而不是在消息输入中使用文本字段。为此，我们需要使用以下代码片段中的代码：

const Form = t.form.Form;
const options = {
  fields : {
    message : {
      multiline : true ,
      stylesheet : {
        ...Form.stylesheet,
        textbox : {
          ...Form.stylesheet.textbox,
          normal : {
            ...Form.stylesheet.textbox.normal,
            height : 150 ,
          },
          error : {
            ...Form.stylesheet.textbox.error,
            height : 150 ,
          },
        },
      },
    },
  },
};

在这里，我们定义了options对象，以便配置Form组件。现在，我们需要将选项常量集成到Form组件中，如下面的代码片段所示：

 <Form
  type={ContactForm}
  options={options}
/>

因此，我们将获得结果，如下页的仿真器屏幕所示：

将消息保存到Firebase数据库

现在，我们将实现将用户消息保存到Firebase数据库的功能。为此，我们需要使用ref prop从表单中获取值，如下面的代码片段所示：

<Form
  type={ContactForm}
  ref={c => ( this ._form = c)}
  options={options}
/>

接下来，我们需要创建一个名为handleSubmit的函数，该函数将从表单中获取值并将其提交给firebase。现在，我们将向其添加一个简单的日志，如下面的代码片段所示：

handleSubmit = async () => {
    // this.setState({submit: true});
    const value = this ._form.getValue();
    console .log(value)
}

现在，我们将为其添加firebase配置，如下面的代码片段所示：

firebase
   .database()
   .ref( 'contact/' )
   .push(value)
   .then( res => {
     Alert.alert( 'thank for reaching me' )
   })
   .catch( err => {
     console .error(err);
   });

在这里，我们使用了firebase模块来调用数据库函数。然后，我们使用了contact ref函数并推动了tie值。结果，我们显示了一个警告框。

因此，我们将在下一页的仿真器屏幕中获得以下结果：

在firebase上的结果：

摘要

在本章中，我们学习了如何在react本机应用程序中设置react-native-firebase 。然后，我们学习了如何使用tcomb-form-native包中的组件来在Contact屏幕中实现表单。然后，我们实现了将消息发送到Firebase。

本系列旨在展示我如何使用react-native构建一个应用程序以服务WordPress博客中的内容。由于我的博客谈论的是本机反应，因此该系列和文章相互联系。我们将学习如何设置许多使我们的生活舒适的程序包，并学习如何处理WordPress API。在此，本书中讨论的最突出的功能是深色主题，脱机模式，无限滚动等。您可以在本系列中找到更多。本教程系列的灵感来自instamobile的React Native App模板

From: https://hackernoon.com/build-wordpress-client-app-with-react-native-14-implementing-settings-screen-gi49i32rk