单击标题中的后退按钮时,应弹出警报(React Native)

时间:2017-06-13 14:03:05

标签: reactjs react-native react-navigation

我正在建立一个反应本机应用程序,我对此相当新。我正在使用React导航从一个页面移动到另一个页面。

目前,我正在使用堆栈导航器。所以我有一个用Facebook登录的屏幕A然后我移动到屏幕B.屏幕B中的标题有一个后退按钮。当我点击它回到我的Facebook登录按钮,现在显示退出。

我的情况是,如果用户点击屏幕B中的后退按钮,他应该在屏幕b中弹出一个弹出窗口。我该如何实现这一目标?

我的屏幕B中有以下代码,即PhoneInputPage.js

 export default class PhoneInputPage extends Component {
 constructor(props) {
  super(props);
 }
static navigationOptions = 
{
 title: 'Get started',

 headerStyle:
 {
    position: 'absolute',   
    backgroundColor: 'transparent', 
    zIndex: 100, 
    top: 0, 
    left: 0, 
    right: 0 ,
    justifyContent:'center'
},     
}



render() 
{
const { navigate } = this.props.navigation;
return ( 
    <KeyboardAwareScrollView  style={[styles.container,styles.background]}>
        <Text style={styles.headLine}>Get riding within minutes</Text>
        <View style={styles.container} />
            <View style={styles.wrapper}>
                <View style={styles.inputWrap}>
                    <TextInput
                        placeholder="Email"
                        style={styles.input}
                        underlineColorAndroid='rgba(0,0,0,0)'
                         keyboardType={'email-address'}
                         autoCorrect={false}
                    />
                </View>
                 <View style={styles.inputWrap}>
                     <TextInput
                         placeholder="Phone Number"
                         style={styles.input}
                         underlineColorAndroid="transparent"
                         keyboardType={'phone-pad'}
                         autoCorrect={false}
                     />


                </View>
                 <Text style={styles.nextText}>We'll send a text to verify your phone</Text>
                <TouchableOpacity activeOpacity={.5} onPress={() =>  navigate('OTP')} underlayColor="transparent">
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>Next</Text>
                    </View>
                </TouchableOpacity>


            </View>   
        <View style={styles.container} />

    </KeyboardAwareScrollView>

  );

} }

我搜索了很多,我找不到多少帮助。任何建议都表示赞赏。

0 个答案:

没有答案