css - 我希望第一张图片上有文字，但第二张不要 - 可滑动

Question

我试图做到这一点:我希望第一张图片上有文字，但之后我不希望有文字。我评论的所有内容都是我最初的做法，但已更改以便你们可以查看。请注意这一点，因为它可能会改变我收到的见解。现在我根本没有显示文本。
此外，如果那里的旋转木马增加了太多的注意力，我可以将其删除。

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  Image,
  ScrollView,
  Dimensions,
  ImageBackground,
} from 'react-native';
import Constants from 'expo-constants';

const { width } = Dimensions.get('window');
const height = width * 0.6;

const images = [
  'https://images.pexels.com/photos/2249602/pexels-photo-2249602.jpeg?cs=srgb&dl=pexels-sergio-souza-2249602.jpg&fm=jpg',
  'https://images.pexels.com/photos/3178881/pexels-photo-3178881.jpeg?cs=srgb&dl=pexels-andrew-neel-3178881.jpg&fm=jpg',
  'https://images.pexels.com/photos/4946412/pexels-photo-4946412.jpeg?cs=srgb&dl=pexels-maria-orlova-4946412.jpg&fm=jpg',
  'https://images.pexels.com/photos/4911060/pexels-photo-4911060.jpeg?cs=srgb&dl=pexels-cottonbro-4911060.jpg&fm=jpg',
];

//this is the array I noramlly use. 
//const images = [
//   {id : "1", uri: require('../../assets/placeholder1.jpg'), text: "Test"},
//   {id : "2", uri: require('../../assets/placeholder2.jpg'), /*text: "Test"*/},
//   {id : "3", uri: require('../../assets/placeholder3.jpg'), /*text: "Test"*/},
//   {id : "4", uri: require('../../assets/placeholder4.jpg'), /*text: "Test"*/},
//   {id : "5", uri: require('../../assets/placeholder5.jpg'), /*text: "Test"*/},
//   {id : "6", uri: require('../../assets/placeholder6.jpg'), /*text: "Test"*/},
//   {id : "7", uri: require('../../assets/placeholder7.jpg'), /*text: "Test"*/},
//   {id : "8", uri: require('../../assets/placeholder8.jpg'), /*text: "Test"*/},
//   {id : "9", uri: require('../../assets/placeholder9.jpg'), /*text: "Test"*/},
//]

export default class App extends React.Component {
  
  state = {
    active: 0,
  };

  change = ({ nativeEvent }) => {
    const slide = Math.ceil(
      nativeEvent.contentOffset.x / nativeEvent.layoutMeasurement.width
    );
      if (slide !== this.state.active) {
        this.setState({ active: slide });
    }
    
  };
  render() {
    return (
     <View style={{flex: 1}}>
      <View style={{ flex: 3, justifyContent: 'center', alignItems: 'center'}}>
        <ScrollView
          pagingEnabled
          horizontal
          showsHorizontalScrollIndicator={false}
          onScroll={this.change}
          style={{ width, height }}>
 
          {
            images.map((image, index) => (
            <ImageBackground
              key={index}
              source={{uri: image}}
              //Normally, I would not have key and source would be like this
              //source={item.uri}
              style={{ width, height: '100%', resizeMode: 'cover' }}>
                  <View style={{position: 'absolute', bottom: 25 }}>      
                     <Text style = {this.state.active === 0 ? <Text>Placeholder</Text> : null , styles.Name}> </Text>  
                 <Text style = {this.state.active === 0 ? <Text>Another Placeholder</Text> : null , styles.Name}> </Text>        
</View>
             </ImageBackground>
             ))
             }

        </ScrollView>

           <View style={{flexDirection: 'row', position: 'absolute', bottom: 0, alignSelf: 'center',}}>
               {
                  images.map((i, k) => (
                    <Text style={k == this.state.active ? styles.activeCorousel : styles.carousel}> 
                      ⬤
                    </Text>
                  ))}
            </View>

     </View>
   </View>
      
    );
  }
}

const styles = StyleSheet.create({
  carousel: {
    color: '#888',
    fontSize: width / 35,
    opacity: .5
  },
  activeCorousel: {
    color: '#fff',
    fontSize: width / 35,
  },
    Name: {
        fontWeight: 'bold',
        color: 'white',
        fontSize: 40,
    paddingLeft: 20
        },      
});

随意将我的代码复制到snack.expo.io。

Answer 1

仅当索引等于 0 时才使用条件 JSX 进行渲染。

images.map((image, index) => (
  <ImageBackground
    key={index}
    source={{uri: image}}
    style={{ width, height: '100%', resizeMode: 'cover' }}
  >
    {index === 0 && (
      <View style={{position: 'absolute', bottom: 25 }}>      
        <Text>Placeholder</Text> 
      </View>
    )}
  </ImageBackground>
))

此外，您的条件样式:

<Text style = {this.state.active === 0 ? <Text>...

根本没有任何意义； style属性不支持 JSX，只支持 React Native 有效的样式 Prop 。