React Native 上根据条件的不同内容

Question

on my react-native app I would like to have premium content for people who paid a subscription.

My issue is how I make the content to display as unavailable(if you are not premium ) and the same as the other content if you are premium. Basically I would like the premium content to be displayed with a "lock overlay" on it for non-premium users.

However, I do not know how I set this conditional. It is a matter of state? If yes where should be positioned this state considering that is unidirectional?

Just to be clear I will have premium and non premium content

class Browser extends Component {
  scrollX = new Animated.Value(0);

  renderRecommended = () => {
    return (
      <View style={[styles.flex, styles.column, styles.recommended]}>
        <View style={[styles.row, styles.recommendedHeader]}>
          <Text
            style={{
              fontSize: theme.sizes.font * 1.4,
              alignSelf: 'center',
              color: 'white',
              fontFamily: 'Nunito-Bold',
            }}>
            Recommended
          </Text>
        </View>
        <View style={[styles.column, styles.recommendedList]}>
          <FlatList
            horizontal
            scrollEnabled
            showsHorizontalScrollIndicator={false}
            scrollEventThrottle={16}
            snapToAlignment="center"
            style={[styles.shadow, {overflow: 'visible'}]}
            data={this.props.destinations}
            keyExtractor={(item, index) => `${item.id}`}
            renderItem={({item, index}) =>
              this.renderRecommendation(item, index)
            }
          />
        </View>
      </View>
    );
  };

  renderRecommendation = (item, index) => {
    const {destinations} = this.props;
    const isLastItem = index === destinations.length - 1;
    const {navigation} = this.props;
    return (
      <TouchableOpacity
        onPress={() =>
          this.props.navigation.navigate('PreScreen', {
            item,
          })
        }>
        <View
          style={[
            styles.flex,
            styles.column,
            styles.recommendation,
            styles.shadow,
            index === 0 ? {marginLeft: theme.sizes.margin} : null,
            isLastItem ? {marginRight: theme.sizes.margin / 2} : null,
          ]}>
          <ImageBackground
            style={[styles.imageback]}
            source={{uri: item.preview}}
          />
        </View>
        <View
          style={[
            index === 0 ? {marginLeft: theme.sizes.margin - 10} : null,
            isLastItem ? {marginRight: theme.sizes.margin / 2} : null,
          ]}>
          <Text
            style={{
              fontSize: theme.sizes.font * 1.25,
              fontWeight: '200',
              color: 'white',
              marginLeft: 10,
              //paddingBottom: 20,
              fontFamily: 'Nunito-Bold',
            }}>
            {item.title}
          </Text>

          <Text
            style={{
              color: theme.colors.caption,
              marginLeft: 10,
              fontFamily: 'Nunito-SemiBold',
            }}>
            {item.location}
          </Text>
        </View>
      </TouchableOpacity>
    );
  };
render() {
    return (
      <ScrollView style={styles.container}>
        <BackgroundSvg style={styles.background} />
        <ScrollView
          style={styles.contentContainer}
          showsVerticalScrollIndicator={false}
          contentContainerStyle={{paddingBottom: theme.sizes.paddin}}>
          {this.renderRecommended()}
          {this.renderRecommended2()}
          {/* <View style={styles.mainContainerView}>
            <TouchableOpacity style={styles.singInButton} gradient>
              <Text style={styles.logInText}>
                Activate premium subscription
              </Text>
            </TouchableOpacity>
          </View> */}
        </ScrollView>
      </ScrollView>
    );
  }
}
Browser.defaultProps = {
  destinations: mocks,
  reading: readingList,
};

export default Browser;

My code is the one on the top. Just to simplify I am accesing some elements from JSON and I am creating Flatlist based on this. What I want is is to give some of the JSON files a bolean with premium or not and in this way to make some elements available for user or not.

Answer 1

As part of your destinations array, for each object, you can specify a boolean field called isPremiumItem . Your users should have a boolean field like isPremiumUser to show the type of their subscription. Then in renderRecommended method you can check the user subscription status ( isPremiumUser ), and also the specific item status ( isPremiumItem ). Then you can render accordingly.