index.js

import React from 'react';
import {
  StyleSheet,
  Dimensions,
  View,
  Text,
  Image,
  ScrollView,
  TouchableOpacity,
  Button,
  Alert,
  Modal
} from 'react-native';
import styles from './styles';
// import DialogBox from 'react-native-dialogbox';


export default class home extends React.Component {


  static navigationOptions = ({ navigation }) => ({
    headerLeft:
    <View style={styles.nav_left_icon_container}>
    <Image
      style={styles.nav_icon}
      source={require('../../images/btn_nv_menu.png')}
    />
    </View>,
    headerTitle: 
    <View style={styles.headerTitleContainer}>
    <Text style={styles.headerTitleTxt}>說明及設定</Text>
    </View>
  });

//   handleOnPress = () => {
//     // alert
    
//     this.dialogbox.confirm({
// 			title: <Text style={styles.logoutTitle}>你確定嗎？</Text>,
//       content: [
//         <Text style={styles.logoutMessage}>登出後系統會將移動裝置中的資料進行刪除</Text>],
//       ok: {
//         text:'登出'
//       },
//       cancel: {
//         text:'取消'
//       }
// 		});
// }

logout () {
const title = "你確定嗎?"
const message = "登出後系統會將移動裝置中的資料進行刪除"

Alert.alert(
  title,
  message,
  [
    {text: '取消', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
    {text: '登出', onPress: () => console.log('OK Pressed')},
  ],
)
}

  render() {

    return (
      <View style={styles.container}>

        <ScrollView
          style={styles.scrollFlex}
          keyboardShouldPersistTaps="always"
          automaticallyAdjustContentInsets={false}
          scrollEventThrottle={200}
        >
      <View style={styles.subRowContainer} />
      <View style={styles.rowBackground}>
        
      <TouchableOpacity>
      <View style={styles.rowContainer}>
        <View>
        <Text style={styles.rowText}>個人檔案</Text>
        </View>
        <View style={styles.rowItemRight}>
                  <Image
                    style={styles.nextArrow}
                    source={require('../../images/kb_arrow_next.png')}
                  />
        </View>
      </View>
      </TouchableOpacity>

      <TouchableOpacity onPress={() => this.props.navigation.navigate('SettingScreen')}>
      <View style={[styles.rowContainer, { borderBottomColor: '#FFF' }]}>
        <View>
        <Text style={styles.rowText}>指標設定 </Text>
        </View>
        <View style={styles.rowItemRight}>
                  <Image
                    style={styles.nextArrow}
                    source={require('../../images/kb_arrow_next.png')}
                  />
        </View>
      </View>
      </TouchableOpacity>
      </View>

    <View style={styles.subRowContainer} />
    <View style={styles.rowBackground}>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('DataSync')}>
      <View style={styles.rowContainer}>
      <View>
      <Text style={styles.rowText}>數據同步</Text>
      </View>
      <View style={styles.rowItemRight}>
                <Image
                  style={styles.nextArrow}
                  source={require('../../images/kb_arrow_next.png')}
                />
      </View>
      </View>
      </TouchableOpacity>

      <TouchableOpacity onPress={() => this.props.navigation.navigate('Notice')}>
        <View style={[styles.rowContainer, { borderBottomColor: '#FFF' }]}>
        <View>
        <Text style={styles.rowText}>通知 </Text>
        </View>
        <View style={styles.rowItemRight}>
                  <Image
                    style={styles.nextArrow}
                    source={require('../../images/kb_arrow_next.png')}
                  />
        </View>
        </View>
      </TouchableOpacity>
      </View>
      

      <View style={styles.subRowContainer} />
      <View style={styles.rowBackground}>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('AboutHRBScreen')}>
      <View style={styles.rowContainer}>
        <View>
        <Text style={styles.rowText}>關於HRB </Text>
        </View>
        <View style={styles.rowItemRight}>
                  <Image
                    style={styles.nextArrow}
                    source={require('../../images/kb_arrow_next.png')}
                  />
        </View>
      </View>
      </TouchableOpacity>

      <TouchableOpacity>
      <View style={[styles.rowContainer, { borderBottomColor: '#FFF' }]}>
        <View>
        <Text style={styles.rowText}>意見回饋 </Text>
        </View>
        <View style={styles.rowItemRight}>
                  <Image
                    style={styles.nextArrow}
                    source={require('../../images/kb_arrow_next.png')}
                  />
        </View>
      </View>
      </TouchableOpacity>
      </View>

      <View style={styles.emptyRowContainer} />
      </ScrollView>

      <TouchableOpacity style={styles.btnLogout} onPress={this.logout}>
          <Text style={styles.btnLogoutText}>
            登出
          </Text>
        
        </TouchableOpacity> 
        
        {/* <DialogBox ref={dialogbox => { this.dialogbox = dialogbox }}/> */}
      </View>
      
    );
  }
}