条件渲染 headerRight - React Native

Question

我必须在导航选项中有条件地呈现 headerRight。

现在

static navigationOptions = ({ navigation }) => ({
    title: i18N.t('atmbranchpickHeader'),

    headerRight: (

        <TouchableHighlight
            underlayColor="#E22F39"
            onPress={() => {
                navigation.navigate("home");
            }}
        >
            <Image
                style={{ marginRight: 20 }}
                source={require('../../resources/toolbar/home_white.png')}
            />
        </TouchableHighlight>
    ),
    headerTintColor: "white",
    headerStyle: {
        backgroundColor: "#E22F39"
        //  top: 30
    }
});

我的组件

  import React, { Component } from "react";
import {
    View,
    TextInput,
    Text,
    TouchableOpacity,
    TouchableHighlight,
    StyleSheet,
    AsyncStorage,
    BackHandler,
    Image,
    FlatList,
    Dimensions,
    TouchableWithoutFeedback
} from "react-native";
import i18n from "../../i18n/i18n.js";
import { colors } from "../../constants/colors.js";
import Storage from "../../utils/AsyncStorage.js";

class AtmBranchTypeSelect extends Component {


    // Render callBack
    constructor(props) {
        super(props);
        this.state = {
            data: [
            ],
            stBool: false,
        }

    }
    async componentWillMount() {


        BackHandler.addEventListener('hardwareBackPress', () => this.props.navigation.goBack());
    }
    componentWillUnmount() {
        BackHandler.removeEventListener('hardwareBackPress', () => this.props.navigation.goBack());
    }





    static navigationOptions = ({ navigation }) => ({
        title: i18n.t('atmbranchpickHeader'),
        headerRight: (
            <TouchableHighlight onPress={() => {
                navigation.navigate('home');
            }}>
                <Image style={{ marginRight: 20 }} source={require('../../resources/toolbar/home_white.png')} />
            </TouchableHighlight>),

        headerTintColor: 'white',
        headerStyle: {
            backgroundColor: colors.themeColor,
            //  top: 30
        }
    });



    _renderList = ({ item }) => {
        return (
            <TouchableWithoutFeedback onPress={(event) => this._selectedItem(item.key)}>
                <View style={styles.listRowContainer}>
                    <View style={styles.listinside1Container}>
                        <Image style={styles.listImage} source={item.icon} />
                        <View style={styles.listContainer} onPress={(event) => this._selectedItem(item.text)}  >
                            <Text style={styles.listHeader} >{item.header}</Text>
                            <Text style={styles.listValue} >{item.value}</Text>
                        </View>
                    </View>
                    <Image style={styles.listimgArrow} source={require('../../resources/toolbar/chevron_right_grey.png')} />
                </View>
            </TouchableWithoutFeedback>
        );

    }
    // Render callBack

    render() {
        return (
            <View style={styles.mainWrapper} >

                <FlatList data={this.state.data} renderItem={this._renderList} />
            </View>
        );
    }
}

const styles = StyleSheet.create({

    mainWrapper: {
        flex: 1,
        height: Dimensions.get('window').height,
        width: Dimensions.get('window').width,

        flexDirection: 'column',
        justifyContent: 'flex-start'
    },
    listRowContainer: {
        flexDirection: 'row',
        marginTop: 10,
        height: 80,
        backgroundColor: '#FFFFFF',
        justifyContent: 'space-between',
        borderBottomWidth: 1,
        borderColor: 'lightgray'
    },
    listinside1Container: {
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center'

    },
    listContainer: {
        alignItems: 'flex-start',
        justifyContent: 'center',
        flexDirection: 'column',
        backgroundColor: '#FFFFFF',
        // borderBottomWidth: 1,
        // borderColor: 'lightgray'

    },
    listHeader: {
        color: 'black',
        fontFamily: 'Roboto-Medium',
        marginLeft: 10,
        fontSize: 18,
    },
    listValue: {
        fontFamily: 'Roboto-Regular',
        marginTop: 4,
        color: 'black',
        marginLeft: 10,
        fontSize: 14,
    },
    listImage: {
        alignSelf: 'center',
        height: 25,
        width: 25,
        margin: 10
    },
    listimgArrow: {
        // flex: 1,
        // flexDirection:'row',
        alignSelf: 'center',
        height: 25,
        width: 25,
        margin: 10
    },
    listVal: {
        borderWidth: 1,
        borderRadius: 10,
        color: 'darkgreen',
        borderColor: 'white',
        backgroundColor: 'white',
        fontWeight: 'bold'

    },



});


export default AtmBranchTypeSelect;

根据我的代码，headerRight 将在所有场景中显示。考虑我有一个场景，比如基于状态值我必须启用/禁用 headerRight Button 。

例如 this.state.stBool？ headerRight:(.....) : null

我必须以这种方式渲染。请指导我实现这一点。

Answer 1

您可以在渲染中嵌套导航选项并根据状态值切换它。没有测试过，性能上也不是很积极。希望对您有所帮助。

import React, { Component } from "react";
import {
  View,
  TextInput,
  Text,
  TouchableOpacity,
  TouchableHighlight,
  StyleSheet,
  AsyncStorage,
  BackHandler,
  Image,
  FlatList,
  Dimensions,
  TouchableWithoutFeedback
} from "react-native";
import i18n from "../../i18n/i18n.js";
import { colors } from "../../constants/colors.js";
import Storage from "../../utils/AsyncStorage.js";

class AtmBranchTypeSelect extends Component {
  // Render callBack
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      stBool: false
    };
  }
  async componentWillMount() {
    BackHandler.addEventListener("hardwareBackPress", () =>
      this.props.navigation.goBack()
    );
  }
  componentWillUnmount() {
    BackHandler.removeEventListener("hardwareBackPress", () =>
      this.props.navigation.goBack()
    );
  }

  _renderList = ({ item }) => {
    return (
      <TouchableWithoutFeedback onPress={event => this._selectedItem(item.key)}>
        <View style={styles.listRowContainer}>
          <View style={styles.listinside1Container}>
            <Image style={styles.listImage} source={item.icon} />
            <View
              style={styles.listContainer}
              onPress={event => this._selectedItem(item.text)}
            >
              <Text style={styles.listHeader}>{item.header}</Text>
              <Text style={styles.listValue}>{item.value}</Text>
            </View>
          </View>
          <Image
            style={styles.listimgArrow}
            source={require("../../resources/toolbar/chevron_right_grey.png")}
          />
        </View>
      </TouchableWithoutFeedback>
    );
  };
  // Render callBack

  render() {
    const { stBool } = this.state;
    const navigationOptions = ({ navigation }) => ({
      title: i18n.t("atmbranchpickHeader"),
      headerRight: stBool ? (
        <TouchableHighlight
          onPress={() => {
            navigation.navigate("home");
          }}
        >
          <Image
            style={{ marginRight: 20 }}
            source={require("../../resources/toolbar/home_white.png")}
          />
        </TouchableHighlight>
      ) : null,
      headerTintColor: "white",
      headerStyle: {
        backgroundColor: colors.themeColor
        //  top: 30
      }
    });
    return (
      <View style={styles.mainWrapper}>
        <FlatList data={this.state.data} renderItem={this._renderList} />
      </View>
    );
  }
}