javascript - react-native webview 按钮隐藏和启用

Question

我开始在 React 中开发新的应用程序。我有一个 webview 应用程序，我想添加这样的功能，我希望在未提供用户登录时底部的篮子图标不出现，但我需要确保在用户登录时底部篮子按钮再次处于活动状态登录。你能帮我看看怎么做吗？

onPressButtonURL = (url) => {

    
    console.log("==========>>> URL: ", url);

    this.setState({ url:`${url}?t=${Date.now()}` });
  }
  mystyles = {
    display: "none"
  };
  render()
  {
    

    return (

      <Container>

        <WebView source={{uri:this.state.url}} ref={WEBVIEW_REF} useWebKit={true} cacheEnabled={true} style={{marginTop: 30, flex: 1}}
                 onLoadProgress={({ nativeEvent }) => {this.loadingProgress = nativeEvent.progress;}}/>

        <View style={{ alignSelf: "auto"}}>
          <Fab active={this.state.active} direction="up" containerStyle={{bottom: 100 }} style={{ backgroundColor: '#5067FF'}} position="bottomRight" onPress={() => this.setState({ active: !this.state.active })}>
            <Icon type="FontAwesome" name="share-alt" />
            <Button style={{ backgroundColor:'#34A34F'}} ref="whatsapp" onPress={() => Linking.openURL('whatsapp://send?text='+wa_message+'&phone='+wa_number) }><Icon type="FontAwesome" name="whatsapp"/></Button>
            <Button style={{ backgroundColor:'#3B5998'}} ref="facebook" onPress={() => Linking.openURL(fb_url) }><Icon type="FontAwesome" name="facebook"/></Button>
            <Button style={{ backgroundColor:'#f09433'}} ref="inst" onPress={() => Linking.openURL(inst_url) }><Icon type="FontAwesome" name="instagram"/></Button>
            <Button  style={{ backgroundColor:'#DD5144'}} ref="mail" onPress={() => Linking.openURL('mailto:'+mail_url) }><Icon type="FontAwesome" name="envelope"/></Button>
          </Fab>
          <Footer>
            <FooterTab>
              <Button vertical onPress={() => this.onPressButtonURL(this.site_url+'index.php')} danger={this.state.clicked}><Icon type="FontAwesome" name="home" /><Text></Text></Button>
              <Button vertical onPress={() => this.onPressButtonURL(this.site_url+'sepetimigoster.html')} danger={this.state.clicked}><Icon type="FontAwesome" name="shopping-basket" id="shopping-basket" /><Text></Text></Button>
              <Button vertical onPress={() => this.onPressButtonURL(this.site_url+'uyegiris.html')}><Icon type="FontAwesome" name="user" /><Text></Text></Button>
              <Button vertical onPress={() =>this.refs[WEBVIEW_REF].goBack()}><Icon type="FontAwesome" name="arrow-left" /><Text></Text></Button>
              <Button vertical onPress={() =>this.refs[WEBVIEW_REF].goForward()}><Icon type="FontAwesome" name="arrow-right" /><Text></Text></Button>
            </FooterTab>
          </Footer>
        </View>
      </Container>

    );
  }
}

标签： javascriptreactjsreact-native

Answer 1

如果您希望完全省略该按钮，您可以有条件地包含它，如下所示：

onPressButtonURL = (url) => {

    
    console.log("==========>>> URL: ", url);

    this.setState({ url:`${url}?t=${Date.now()}` });
  }
  mystyles = {
    display: "none"
  };
  render()
  {
    let isLoggedIn = false; // wherever this comes from

    return (

      <Container>

        <WebView source={{uri:this.state.url}} ref={WEBVIEW_REF} useWebKit={true} cacheEnabled={true} style={{marginTop: 30, flex: 1}}
                 onLoadProgress={({ nativeEvent }) => {this.loadingProgress = nativeEvent.progress;}}/>

        <View style={{ alignSelf: "auto"}}>
          <Fab active={this.state.active} direction="up" containerStyle={{bottom: 100 }} style={{ backgroundColor: '#5067FF'}} position="bottomRight" onPress={() => this.setState({ active: !this.state.active })}>
            <Icon type="FontAwesome" name="share-alt" />
            <Button style={{ backgroundColor:'#34A34F'}} ref="whatsapp" onPress={() => Linking.openURL('whatsapp://send?text='+wa_message+'&phone='+wa_number) }><Icon type="FontAwesome" name="whatsapp"/></Button>
            <Button style={{ backgroundColor:'#3B5998'}} ref="facebook" onPress={() => Linking.openURL(fb_url) }><Icon type="FontAwesome" name="facebook"/></Button>
            <Button style={{ backgroundColor:'#f09433'}} ref="inst" onPress={() => Linking.openURL(inst_url) }><Icon type="FontAwesome" name="instagram"/></Button>
            <Button  style={{ backgroundColor:'#DD5144'}} ref="mail" onPress={() => Linking.openURL('mailto:'+mail_url) }><Icon type="FontAwesome" name="envelope"/></Button>
          </Fab>
          <Footer>
            <FooterTab>
              <Button vertical onPress={() => this.onPressButtonURL(this.site_url+'index.php')} danger={this.state.clicked}><Icon type="FontAwesome" name="home" /><Text></Text></Button>
              {isLoggedIn && 
                  <Button vertical onPress={() => this.onPressButtonURL(this.site_url+'sepetimigoster.html')} danger={this.state.clicked}><Icon type="FontAwesome" name="shopping-basket" id="shopping-basket" /><Text></Text></Button>}
              <Button vertical onPress={() => this.onPressButtonURL(this.site_url+'uyegiris.html')}><Icon type="FontAwesome" name="user" /><Text></Text></Button>
              <Button vertical onPress={() =>this.refs[WEBVIEW_REF].goBack()}><Icon type="FontAwesome" name="arrow-left" /><Text></Text></Button>
              <Button vertical onPress={() =>this.refs[WEBVIEW_REF].goForward()}><Icon type="FontAwesome" name="arrow-right" /><Text></Text></Button>
            </FooterTab>
          </Footer>
        </View>
      </Container>

    );
  }
}