代码之家  ›  专栏  ›  技术社区  ›  ewizard

反应本机-模式不呈现

rendering conditional navigation react-native javascript
  •  1
  • ewizard  · 技术社区  · 7 年前

    这就是 render RespondToInquiry 组件应:

    主屏幕.js 

    componentDidMount() {
    console.log('key for stack navigator:',this.props.navigation.dangerouslyGetParent().state.key);

    this._sub = this.props.navigation.addListener(
      'didFocus',
      () => {
        console.log('in didFocus for HomeScreen');
        if(this.props.navigation.getParam('data', '') != '') {
          console.log('showRespondTo fired.');
          this.setState({info: this.props.navigation.getParam('data', '')})
          this.setState({showRespondTo: true});
        }
      }
    );

    ....

}

render() {
    console.log('in render of HomeScreen',this.props.navigation.getParam('data', ''),this.state.showRespondTo);
    return (
      <View style={{flex:1}}>
        {this.state.showRespondTo && this.returnRespond()}
          <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
            <View style={styles.container}>
              <MultiSelectList
                style={{backgroundColor: '#ffe4c4'}}
                data={this.state.items}
                renderItem={this.renderListItems}
                numColumns={2}
                contentContainerStyle={{}}
                onEndReachedThreshold={0.5}
                maxToRenderPerBatch={2}
                initialNumToRender={4}
                ListHeaderComponent={this.renderHeader}
                getItemLayout={(data, index) => (
                  {length: Dimensions.get('window').height/2, offset: Dimensions.get('window').height/2 * index, index}
                )}
                backgroundColor={this.state.backgroundColor}
              />
            </View>
          </TouchableWithoutFeedback>
      </View>
    );
}

    输出 console.log('in render of HomeScreen',this.props.navigation.getParam('data', ''),this.state.showRespondTo); 是: 

    in render of HomeScreen (2)
{tempId: "1537747945332", message: "Hi, I would like to rent an item from you.", dates: "[]"}
true

    所以你可以看到 this.state.showRespondTo 是真的,所以应该 ,但事实并非如此。

    RespondToInquiry.js 看起来像: 

    _renderModalContent = () => (
    <TouchableWithoutFeedback onPress={() => {if(this.state.keyboardOpen) {Keyboard.dismiss()}}}>
      <Animated.View
        style={{
          paddingTop: 5,
          paddingBottom: 10,
          paddingLeft: 10,
          paddingRight: 10,
          marginTop: this.state.yPosition,
          marginBottom: this.state.yPositionPositive,
          flex: 1,
          marginLeft: (Dimensions.get('window').width - 300) / 4,
          backgroundColor: 'rgba(0,0,0,0.8)',
          width: 300,
          borderRadius: 4,
          borderWidth: 0,
        }}>

        <View style={{ flexDirection: 'column', justifyContent: 'space-between', flex: 1 }}>
          <View style={{flexDirection: 'column', justifyContent: 'space-between', flex: 0, backgroundColor: '#e6fffe', marginTop: 5}}>
            <View style={{flex: 0, backgroundColor: '#e6fffe', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', paddingBottom: 10, borderBottomColor: '#6de3dc', borderBottomWidth: 0}}>
              <View style={{justifyContent: 'center', alignItems: 'center', flex: 0.5}}>
                <View style={{flexDirection: 'column', justifyContent: 'space-between'}}>
                  <Image
                    source={require('../assets/billythekid2.jpg')}
                    style={{height: 60, width: 60, marginTop: Platform.OS === 'ios' ? 10 : 10, borderColor: '#6de3dc', borderWidth: 2, borderRadius: 30}}
                  />
                  <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginTop: 5}}>
                    <Ionicons
                      name='ios-star'
                      color='#eec400'
                      size={14}
                    />
                    <Ionicons
                      name='ios-star'
                      color='#eec400'
                      size={14}
                    />
                    <Ionicons
                      name='ios-star'
                      color='#eec400'
                      size={14}
                    />
                    <Ionicons
                      name='ios-star'
                      color='#eec400'
                      size={14}
                    />
                    <Ionicons
                      name='ios-star'
                      color='#eec400'
                      size={14}
                    />
                  </View>
                </View>
              </View>
              <View style={{flexDirection: 'column', backgroundColor: '#e6fffe', marginTop: Platform.OS === 'ios' ? 10 : 10, flex: 0.5}}>
                <View style={{flexDirection: 'row', flex: 0.5}}>
                  <View style={{flex: 0, alignSelf: 'center'}}>
                    <Text style={{fontSize: 16, fontWeight: '700'}}>
                      eamon.white
                    </Text>
                  </View>
                </View>
              </View>
            </View>
            <View style={{flex: 0, marginBottom: 5, backgroundColor: '#e6fffe'}}>
              <Text
                style={{
                  width: 280,
                  flex: 0,
                  backgroundColor: '#e6fffe',
                  paddingLeft: 5,
                  borderWidth: 0,
                  borderRadius: 4,
                  color: '#000'
                }}>
                  {this.state.messageFromSender}
              </Text>
            </View>
          </View>
          <View style={{ flexDirection: 'column', flex: 1, marginBottom: 5 }}>
            <Text
              style={{
                flex: 0,
                width: Dimensions.get('window').width,
                color: 'white',
                fontWeight: '700',
                marginTop: 5,
                marginBottom: 5
              }}>
              Date(s) Needed:
            </Text>
            {this.showCalendar()}
          </View>
          <View style={{ flexDirection: 'column', flex: 0.1, marginBottom: 10 }}>
            <TextInput
              style={{
                width: 280,
                flex: 1,
                borderColor: 'gray',
                borderWidth: 1,
                backgroundColor: '#ffffff',
                paddingLeft: 5,
                borderRadius: 4,
              }}
              onChangeText={text => this.setState({ message: text })}
              value={this.state.message}
              multiline={true}
              numberOfLines={2}
              onFocus={this.animateUp}
              placeholder='Type a message...'
            />
          </View>
          <View style={{ flex: 0.1, borderRadius: 4, borderWidth: 0, marginBottom: 10 }}>
            <TouchableOpacity
              activeOpacity={1}
              style={{
                backgroundColor: this.state.rentButtonBackground,
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center',
                width: 280,
                borderRadius: 4,
                borderWidth: 0,
              }}
              onPress={() => {

              }}>
              <Text
                style={{
                  backgroundColor: this.state.rentButtonBackground,
                  textAlign: 'center',
                  color: 'white',
                  fontWeight: '900',
                  fontSize: 18,
                  borderRadius: 4,
                  borderWidth: 0,
                }}>
                RESPOND
              </Text>
            </TouchableOpacity>
          </View>
          <View style={{ flex: 0.1, borderRadius: 4, borderWidth: 0, marginBottom: 10 }}>
            <TouchableOpacity
              activeOpacity={1}
              style={{
                backgroundColor: this.state.rentButtonBackground,
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center',
                width: 280,
                borderRadius: 4,
                borderWidth: 0,
              }}
              onPress={() => {

              }}>
              <Text
                style={{
                  backgroundColor: this.state.rentButtonBackground,
                  textAlign: 'center',
                  color: 'white',
                  fontWeight: '900',
                  fontSize: 18,
                  borderRadius: 4,
                  borderWidth: 0,
                }}>
                ACCEPT
              </Text>
            </TouchableOpacity>
          </View>
          <View style={{ flex: 0.1, borderRadius: 4, borderWidth: 0 }}>
            <TouchableOpacity
              activeOpacity={1}
              style={{
                backgroundColor: this.state.rentButtonBackground,
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center',
                width: 280,
                borderRadius: 4,
                borderWidth: 0,
              }}
              onPress={() => {

              }}>
              <Text
                style={{
                  backgroundColor: this.state.rentButtonBackground,
                  textAlign: 'center',
                  color: 'white',
                  fontWeight: '900',
                  fontSize: 18,
                  borderRadius: 4,
                  borderWidth: 0,
                }}>
                DECLINE
              </Text>
            </TouchableOpacity>
          </View>
        </View>
      </Animated.View>
    </TouchableWithoutFeedback>
);

render() {
    //console.log('this.state._markedDates in render:', this.state._markedDates);
    return (
      <Modal
        animationType="slide"
        transparent={true}
        visible={this.state.modalVisible}                                                           //THIS NEEDS TO BE TRUE WHEN I COME BACK
        onBackdropPress ={() => {/*console.log("backdrop pressed");*/ if(!this.state.keyboardOpen) {this.setModalVisible(false)} else {Keyboard.dismiss()}}}>
        {this._renderModalContent()}
      </Modal>
    )
}

    Home 路线从导航到 App.js ,它正在接收推送通知…对推送通知的响应是代理在导航是否发生时所做的操作。导航是这样的: 

    export default class App extends React.Component {

  constructor() {
    super();
  }

  componentDidMount() {
    this.messageListener = firebase.messaging().onMessage((message: RemoteMessage) => {
      console.log(message);

      // prevent infite look
      //if (!message.local_notification) {
        let count = 1;
        let string = '';
        for(date of JSON.parse(message.data.dates)) {

          if(count == JSON.parse(message.data.dates).length)
            string += date;
          else {
            string += date+'\n';
          }

          count++;
        }
        // Process your message as required
        Alert.alert(
          'New Rental Inquiry',
          'Dates Requested:\n\n'+string,
          [
            {text: 'RESPOND', onPress: () => {
              console.log("message.data:", message.data);
              console.log("this.props.ref:", this.props.ref);
              //NavigationService.reset('Home', { data: JSON.parse(JSON.stringify(message.data)) })
              NavigationService.navigate('Home', { data: JSON.parse(JSON.stringify(message.data)) });
            }},
            {text: 'IGNORE', onPress: () => console.log('IGNORE Pressed')},
          ],
          { cancelable: false }
        )
      //}
    });
  }

  ....

    我拿走了 NavigationService this.props.navigation.navigate() .

    更新

    visible 道具对假有效,所以当 应答查询 componentWillUnmount 应答查询 state variable—我将模态的默认值设置为可见,因此当我从它导航时,它不能被卸载,即使它不在任何导航堆栈中。还有,上面-你可以看到我的 didFocus 更改负责呈现的条件的侦听器 应答查询 .

    2 回复  |  直到 7 年前
        1
  •  0
  •   ewizard    7 年前

    componentDidMount 属于 HomeScreen.js 

    this._sub2 = this.props.navigation.addListener(
      'didBlur',
      () => {
        console.log('in didBlur for HomeScreen');
        this.setState({info: this.props.navigation.getParam('data', '')})
        this.setState({showRespondTo: false});
      }
);

    从本质上来说,似乎条件要被再次确认为真,它必须被重置-对此的解释将是伟大的。

        2
  •  0
  •   Akshay Vijay Jain    7 年前

    我还面临一个问题,模态没有渲染,这是由于放置
    windows.alert()
    为验证而设置状态后调用。
    因此可以通过删除警报来解决。

    推荐文章
    handsome  ·  在react native(0.5)中更改视图
    7 年前
    Noel  ·  创建XAML启动页并导航到选项卡式页面
    7 年前
    M'sieur Toph'  ·  Angular 5-在组件内部获取懒散加载的模块根路径
    7 年前
    Drake  ·  系统InvalidOperationException:页面不能已有父级
    7 年前
    Stephan Ahlf  ·  如何找出触发HTML导航的位置
    7 年前
    David  ·  如何返回并刷新Flatter中的上一页?
    7 年前
    kizawa tomaru  ·  PHP get\u file\u内容会话后页面导航
    7 年前
    Ali123  ·  如何使用Rg。插件。使用Prism弹出Xamarin表单?
    7 年前
    raj  ·  部署在tomcat上的angular 4应用程序在okta身份验证后未正确重新路由
    7 年前
    Tania  ·  这是javafx中事件过滤器和requstfocus的正确行为吗?
    7 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号